@import "../../mixins";

.map-scale-options {
    lost-column: 1/4;
    lost-align: right;
    lost-flex-container: row;
    & .map-scale-text {
      @add-mixin font-xs;
      width: 100%;
      text-align: right;
      margin-right: 5px;
      text-transform: uppercase;
      color: var(--light-3);
      @add-mixin body-font;
    }
    & .map-scale-options-container {
      lost-flex-container: row;
      flex-wrap: nowrap;
      & .toggle {
        @add-mixin font-xxs;
        @add-mixin body-font;
        background-color: var(--white);
        text-align: center;
        padding: 5px 15px;
        margin-right: 5px;
        text-transform: uppercase;
        width: auto;
        transition: background-color 0.5s, color 0.5s;
        border: 1px solid var(--light-2);
        color: var(--light-3);

        &.selected {
          background-color: var(--accent);
          color: var(--white);
          border: 1px solid var(--accent);
        }

        &:active,
        &:hover {
          text-decoration: none;
          background-color: var(--accent);
          color: var(--white);
        }

        &.disabled {
          background-color: transparent;
          color: var(--light-3);
          border: 1px solid var(--light-2);
        }
      }
    }
  }
