/* Stylesheet for rendering SVG rack elevations */
@import './theme.scss';
* {
  font-family: $font-family-sans-serif;
  font-size: $font-size-sm;
}
rect {
  box-sizing: border-box;
}
text {
  text-anchor: middle;
  dominant-baseline: middle;
}
.rack {
  background-color: $gray-100;
  fill: none;
  stroke: black;
  stroke-width: 2px;
}
.slot {
  fill: $gray-200;
  stroke: $gray-500;
}
.slot:hover {
  fill: $white;
}
.slot + .add-device {
  fill: none;
}
.slot:hover + .add-device {
  fill: $primary;
}
.add-device:hover {
  fill: $primary;
}
.add-device:hover + .slot {
  fill: $white;
}
.reserved {
  fill: url(#reserved);
}
.reserved:hover {
  fill: url(#reserved);
}
.occupied {
  fill: url(#occupied);
}
.occupied:hover {
  fill: url(#occupied);
}
.blocked {
  fill: url(#blocked);
}
.blocked:hover {
  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;
}