@import "../tokens/typography";
@import "../tokens/colors";
@import "../tokens/shadows";
@import "../tokens/border_radius";
@import "./_pb_map_button_mixin.scss";
@import "../tokens/titles";

[class*="pb_map"] {
  .pb_map-custom-button {
    @include pb_map_button;
    position: relative;
    margin-top: $space_xs;
    box-shadow: $shadow_deep;
    .pb_icon_kit {
      width: $space_sm - 2;
      height: $space_sm;
    }

    .pb_button_content {
      height: $space_sm;
    }
  }

  .mapboxgl-map,
  .maplibregl-map {
    font-family: $font_family_base !important;
  }

  .maplibregl-ctrl-attrib-button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23687887'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset !important;
    &:focus {
      box-shadow: unset;
    }
    &:focus-visible {
      box-shadow: inset 0 0 0 1px $primary_action;
    }
    &:hover {
      box-shadow: $shadow_deep;
      background-color: $card_light !important;
    }
    &:active {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23242B42'/%3e%3c/svg%3e");
    }
  }

  .mapboxgl-ctrl-attrib.mapboxgl-compact,
  .maplibregl-ctrl-attrib.maplibregl-compact {
    background-color: unset;
  }
  .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
  .maplibregl-ctrl-attrib.maplibregl-compact-show {
    background-color: $card_light;
    box-shadow: $shadow_deep;
    color: $text_lt_default;
  }

  .mapboxgl-ctrl-group:not(:empty),
  .maplibregl-ctrl-group:not(:empty) {
    position: absolute;
    top: 135px;
    right: $space_xs + 3;
    margin: unset;
    box-shadow: unset;
    border-radius: $border_radius_md;

    .mapbox-gl-draw_ctrl-draw-btn {
      width: $space_lg + 2;
      height: $space_lg + 3;
      box-shadow: $shadow_deep;
      background: $card_light;
      border: solid 1px $border_light;
    }

    .mapbox-gl-draw_polygon {
      @include pb_map_button_states;
      border-top-left-radius: $border_radius_md;
      border-top-right-radius: $border_radius_md;
      border-bottom-color: transparent;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23687887'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      &.active {
        background-color: darken($bg_light, 5%);
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23242B42'/%3e%3c/svg%3e");
      }
      &:active {
        &:focus {
          border-bottom-color: transparent;
        }
      }
    }

    .mapbox-gl-draw_trash {
      @include pb_map_button_states;
      border-bottom-left-radius: $border_radius_md;
      border-bottom-right-radius: $border_radius_md;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23687887'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      &:active {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23242B42'/%3e%3c/svg%3e");
      }
    }
  }

  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    margin-top: -1px;
  }

  .custom-nav-control {
    position: absolute;
    right: $space_xs + 3;
    top: $space_xs + 2;
    z-index: 2;

    .custom-nav-control-zoom {
      border-radius: $border_radius_md;
      box-shadow: $shadow_deep;
      background: $card_light;
      .map-zoom-in-button {
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
        border-bottom-color: transparent;
        &:active {
          &:focus {
            border-bottom-color: transparent;
          }
        }
      }
      .map-zoom-out-button {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
      }
    }

    .map-zoom-in-button,
    .map-zoom-out-button,
    .map-flyto-button {
      @include pb_map_button;

      .pb_button_content {
        height: $space_sm;
      }

      svg {
        width: $space_xs + 6;
        height: $space_sm;
        display: flex;
      }
    }

    .map-flyto-button {
      margin-top: $space_xs;
      box-shadow: $shadow_deep;
    }
  }

  .maplibregl-popup-content {
    @include pb_title_4;
    padding: $space_sm;
    background-color: $card_light;
    box-shadow: $shadow_deeper;
    border-radius: $border_rad_heavier;
  }

  &.dark {
    .maplibregl-canvas {
      filter: invert(100%) brightness(175%) contrast(80%) sepia(50%) saturate(2)
        hue-rotate(185deg);
    }

    .mapboxgl-marker,
    .maplibregl-marker svg g:nth-of-type(1) g:nth-of-type(5) circle {
      fill: $bg_dark;
    }

    .maplibregl-ctrl-attrib-button {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23ffffff99'/%3e%3c/svg%3e");
      &:hover {
        background-color: $bg_dark !important;
      }
      &:active {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
      }
    }

    .pb_section_separator_kit_card_horizontal::after {
      background: $border_dark;
    }
    .custom-nav-control-zoom {
      background: $bg_dark;
    }

    .maplibregl-popup-content {
      @include pb_title_4;
      background-color: $bg_dark;
      color: $text_dk_default;
    }

    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
    .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
      border-top-color: $bg_dark;
    }
    .map-zoom-in-button,
    .map-zoom-out-button,
    .map-flyto-button, .pb_map-custom-button {
      @include pb_map_button_dark;
    }

    .maplibregl-ctrl-attrib-button {
      background-color: $text_dk_light;
    }
    .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
    .maplibregl-ctrl-attrib.maplibregl-compact-show {
      background-color: $bg_dark;
      box-shadow: $shadow_deep;
      color: $text_dk_light;
      a {
        color: $text_dk_light;
      }
    }

    .mapboxgl-ctrl-group:not(:empty),
    .maplibregl-ctrl-group:not(:empty) {
      background-color: $bg_dark;

      .mapbox-gl-draw_ctrl-draw-btn {
        @include pb_map_button_dark;
      }

      .mapbox-gl-draw_polygon {
        border-bottom-color: transparent;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23ffffff99'/%3e%3c/svg%3e");
        &:focus-visible {
          border: solid 1px $primary_action;
        }
        &:active {
          &:focus {
            border-bottom-color: transparent;
          }
        }
        &.active {
          background-color: $bg_dark;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
        }
      }

      .mapbox-gl-draw_trash {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23ffffff99'/%3e%3c/svg%3e");
        &:focus-visible {
          border: solid 1px $primary_action;
        }
        &:active {
          background-color: $bg_dark;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
        }
      }
    }
  }
}