ahbeng/NUSMods

@import '~styles/utils/modules-entry';

// Colors from https://material.io/design/color/
$route-colors: (
  A: #e53935,
  B: #8e24aa,
  C: #1e88e5,
  D: #558b2f,
  BTC: #6d4c41,
);

.iconWrapper {
  $color: #0092da;

  .hitArea {
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba($color, 0.3);
    box-shadow: 0 0 8px rgba($color, 0.3);
    transition: opacity 0.25s;

    // Highlight the bus stops when editing
    &.editing {
      opacity: 1;
      border: 1px solid #000;
      background: rgba(#000, 0.3);
    }
  }

  &:hover .hitArea {
    opacity: 1;
  }

  .routeWrapper {
    position: absolute;
    top: 6px;
    left: calc(100% - 4px);
    width: 100px;
    line-height: 1.3;
    pointer-events: none; // So the entire 100px width will not be selectable when there's only one route

    &.left {
      right: calc(100% - 4px);
      left: auto;
      text-align: right;
    }
  }

  .route {
    display: inline-block;
    padding: 2px 3px;
    margin-right: 4px;
    border-radius: 1px;
    font-weight: bold;
    font-size: 9px;
    line-height: 1;
    color: #fff;
    pointer-events: auto;
  }
}

// Popup styles
.heading {
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.timings {
  margin-bottom: 0.2rem;

  td {
    font-size: 0.85rem;
    white-space: nowrap;

    strong {
      color: theme-color(success);
    }
  }

  .routeHeading {
    vertical-align: middle;
    color: #fff;
  }
}

.refreshBtn {
  width: 100%;
  padding: 3px 0;

  .refreshIcon {
    margin-right: 0.6rem;

    :global {
      animation: spin 2s infinite linear paused;
    }
  }

  &.isLoading .refreshIcon {
    animation-play-state: running;
  }
}

// Define a color for each route
.routeA1 {
  background: map-get($route-colors, 'A');
}

.routeA2 {
  background: darken(map-get($route-colors, 'A'), 12);
}

.routeB1 {
  background: map-get($route-colors, 'B');
}

.routeB2 {
  background: lighten(map-get($route-colors, 'B'), 15);
}

.routeC {
  background: map-get($route-colors, 'C');
}

.routeD1 {
  background: map-get($route-colors, 'D');
}

.routeD2 {
  background: lighten(map-get($route-colors, 'D'), 10);
}

.routeBTC1 {
  background: map-get($route-colors, 'BTC');
}

.routeBTC2 {
  background: lighten(map-get($route-colors, 'BTC'), 15);
}