// Entry for rack_elevation.css stylesheet.

@import './theme-light.scss';

* {
  font-family: $font-family-sans-serif;
  font-size: $font-size-sm;
}
rect {
  box-sizing: border-box;
}
text {
  text-anchor: middle;
  dominant-baseline: middle;
}

svg {
  .rack {
    background-color: $gray-100;
    fill: none;
    stroke: $body-color;
    stroke-width: 2px;
  }
  .slot {
    fill: $gray-100;
    stroke: $gray-500;
    &:hover {
      fill: $gray-50;
    }
    & + .add-device {
      fill: none;
    }
    &:hover + .add-device {
      fill: $blue;
    }
    & .add-device {
      &:hover {
        fill: $blue;
      }
      &:hover + .slot {
        fill: $white;
      }
    }
    &.reserved[class] {
      fill: url(#reserved);
    }
    &.reserved:hover[class] {
      fill: url(#reserved);
    }
    &.occupied[class] {
      fill: url(#occupied);
    }
    &.occupied:hover[class] {
      fill: url(#occupied);
    }
    &.blocked[class] {
      fill: url(#blocked);
    }
    &.blocked:hover[class] {
      fill: url(#blocked);
    }
    &.blocked:hover + .add-device {
      fill: none;
    }
  }

  .unit {
    margin: 0;
    padding: 5px 0px;
    fill: $gray-400;
    font-size: $font-size-sm;
    font-family: $font-family-sans-serif;
  }
  .hidden {
    visibility: hidden;
  }

  &[data-netbox-color-mode='dark'] {
    .rack {
      background-color: $gray-800;
    }
    .slot {
      fill: $gray-700;
      stroke: $gray-400;
      &:hover {
        fill: $gray-600;
      }
      & + .add-device {
        fill: none;
      }
      &:hover + .add-device {
        fill: $blue-300;
      }
    }
    .add-device {
      &:hover {
        fill: $blue-300;
      }
      &:hover + .slot {
        fill: $black;
      }
    }
  }
}