.selectable-token input {
  display: none;
}

.selectable-token label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: start;
  height: $btn-height;
  margin: 0;
  padding: $spacing-xs $spacing-md $spacing-xs $spacing-md;
  line-height: normal;
  color: $primary;
  background-color: transparent;
  border: $border-width solid $primary;
  border-radius: $border-radius;
  cursor: pointer;
  user-select: none;
  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
    & .icon {
      color: $white;
    }
  }
}

.selectable-token.inverted label {
  color: $primary;
  &:hover, &:focus {
    color: $white;
  }
}

.selectable-token.square label {
  align-items: center;
  justify-content: center;
  padding: $spacing-xs;
  width: $btn-height;
  height: $btn-height;
}

.selectable-token input:checked + label,
.selectable-token.inverted input:checked + label {
  color: $white;
  border-color: $info;
  background-color: $info;
  background-image: none;

  &::after {
    display: block;
    position: absolute;
    height: 6px;
    width: 8px;
    top: 3px;
    left: 3px;
    background-color: $white;
    content: "";
    mask-image: url("@images/check-selectable-items.svg");
    mask-repeat: no-repeat;
  }

  & .icon-low, & .icon-high, & .icon-critical {
    color: $white;
  }
  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
    & .icon {
      color: $white;
    }
  }
}

.selectable-token.success input:checked + label,
.selectable-token.success.inverted input:checked + label {
  background-color: $success;
  border-color: $success;
}

.selectable-token.danger input:checked + label,
.selectable-token.danger.inverted input:checked + label {
  background-color: $danger;
  border-color: $danger;
}


.selectable-token input:checked:disabled + label,
.selectable-token.disabled input:checked + label,
.selectable-token.disabled input + label,
.selectable-token input:disabled + label,
.selectable-token input.disabled + label,
.selectable-token input.disabled:checked + label {
  color: $disabled;
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  background-color: transparent;
  border-color: $disabled;
  cursor: not-allowed;
  &::after {
    background-color: $disabled;
  }
  .icon {
    color: $disabled;
  }
  &:hover, &:focus {
    background-color: transparent;
  }
}

.selectable-token.inverted input:checked:disabled + label,
.selectable-token.inverted input:disabled + label,
.selectable-token.inverted.disabled input:checked + label,
.selectable-token.inverted.disabled input + label,
.selectable-token.inverted input:disabled + label,
.selectable-token.inverted input.disabled + label,
.selectable-token.inverted input.disabled:checked + label {
  color: $disabled-dark;
  background-image: url("@images/pattern-striped-dark.png");
  border-color: $disabled-dark;
  &::after {
    background-color: $disabled-dark;
  }
  .icon {
    color: $disabled-dark;
  }
  &:hover, &:focus {
    background-color: transparent;
  }
}

.toggle-btn-group {
  display: flex;
}

.toggle-btn-group .selectable-token label {
  border-radius: 0;
}

.toggle-btn-group .selectable-token:first-child label {
  border-radius: $border-radius 0 0 $border-radius;
}

.toggle-btn-group .selectable-token:last-child label {
  border-radius: 0 $border-radius $border-radius 0;
}


////// Token LG //////

.selectable-token.lg label,
.selectable-token.lg input:checked + label {
  flex-direction: column;
  width: $btn-lg-size;
  height: auto;
  padding: 0;
  font-size: $font-size-label;
  line-height: 1;
  text-align: center;
  color: $primary;
  border: none;
  border-radius: 0;
  background-color: transparent;
  &:hover, &:focus {
    color: $primary;
    background-color: transparent;
    & .icon {
      color: $white;
      background-color: $link-hover-color;
      border-color: $link-hover-color;
    }
  }
}

.selectable-token.lg .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: $spacing-xxs;
  width: $btn-lg-size;
  height: $btn-lg-size;
  font-size: $font-size-icon-lg;
  color: $primary;
  border: $border-width solid $primary;
  border-radius: $border-radius;
}

.selectable-token.lg input:checked + label .icon {
  color: $white;
  border-color: $info;
  background-color: $info;
  background-image: none;
}

.selectable-token.lg input:disabled + label,
.selectable-token.lg input.disabled + label,
.selectable-token.lg input.disabled:checked + label {
  color: $disabled;
  background-image: none;

  & .icon {
    color: $disabled;
    background-image: url("@images/pattern-striped-bright.png");
    background-repeat: repeat;
    background-color: transparent;
    border-color: $disabled;
  }

  &:hover, &:focus {
    color: $disabled;
  }
  &:hover .icon, &:focus .icon {
    color: $disabled;
    border-color: $disabled;
    background-color: transparent;
  }
}

.selectable-token.inverted.lg input:disabled + label,
.selectable-token.inverted.lg input.disabled + label,
.selectable-token.inverted.lg input.disabled:checked {
  color: $disabled-dark;
  background-image: none;

  & .icon {
    color: $disabled-dark;
    background-image: url("@images/pattern-striped-dark.png");
    border-color: $disabled-dark;
    background-repeat: repeat;
    background-color: transparent;
  }
}

////// Token XL //////

.selectable-token.xl label {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: $btn-xl-size;
  height: $btn-xl-size;

  .icon {
    display: block;
    font-size: $font-size-icon-xl;
    height: $font-size-icon-xl;
    margin: $spacing-xs 0 $spacing-xs 0;
  }
}

////// Token SM //////

.selectable-token.sm label,
.selectable-token.sm input + label {
  height: $btn-sm-height;
  padding: $spacing-xxs $spacing-sm;
}

.selectable-token.sm label .icon {
  font-size: $font-size-icon-sm;
}