@use '../../../vendor/twbs/bootstrap/scss/bootstrap' as *;
@use "../../../assets/styles/variables" as variables;
@use 'data2ui_mini-bootstrap';

/* Color of the Map */
#map svg {
  fill: white;
  /* stroke: #424648; stroke-width: 2px; */

  .windGustText {
    font-size: 0.8rem;
  }
}

/* Color department border */
#map .department {
  fill: #e6e5e5;
  stroke: #fff;
  stroke-width: 1px;
  transition: background 0.2s;
  cursor: pointer;
}

#map .department:hover {
  fill: #dedddd;
}

[data-hourly-table-toggle-icon] {
  transition: transform 0.2s ease;
}


.periodSelector .list-group-item.active {
  background-color: variables.$secondary !important;
  border-color: variables.$secondary !important;
}

.days-selector {
  //margin: 15px 0;
  a {
    transition: linear 0.4s;
    display: block;
    line-height: 1;
    text-decoration: none;
    text-align: right;
    color: darken(variables.$secondary, 20%);
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 10px 10px !important;

    @include media-breakpoint-up(lg) {
      &:not(:last-child) {
        border-bottom: solid #dfdfdf 1px;
      }
    }
    @include media-breakpoint-down(md) {
      border-bottom: solid #dfdfdf 1px;
    }

    &.active, &:hover {
      background: darken(variables.$secondary, 20%);
      color: #ffffff;
    }

    .day-of-week {
      display: block;
      font-size: 0.8em;
      font-weight: 700;
    }

    .day-of-month {
      display: block;
      font-size: 1.2em;
    }
  }
}