@import "../tokens/animation-curves";
@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/shadows";
@import "../tokens/spacing";
@import "../tokens/transition";
@import "../tokens/typography";
@import "../pb_card/card";

$pb_selectable_card_indicator_size: 22px;
$pb_selectable_card_border: 2px;

[class^=pb_selectable_card_kit] {
  display: block;
  margin-bottom: 0;

  > label {
    > .buffer {
      display: inherit;
      flex-direction: inherit;
      padding: 1px;
    }

    @include pb_card;
    transition-property: none;
    transition-duration: 0s;
    background-color: $white;
    padding: $space_sm;
    margin-bottom: $space_sm;
    cursor: pointer;

    @media (hover:hover) {
      &:hover {
        box-shadow: $shadow-deep;
        border-color: $slate;
      }
    }

    .pb_selectable_card_circle {
      display: flex;
      justify-content: center;
      align-items: center;
      height: $pb_selectable_card_indicator_size;
      width: $pb_selectable_card_indicator_size;
      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
      border-width: $pb_selectable_card_border;
      border-style: solid;
      border-color: $white;
      background: $primary_action;
      color: $white;
      font-size: $font_smaller;
      text-align: center;
      position: absolute;
      top: -($pb_selectable_card_indicator_size/2);
      right: -($pb_selectable_card_indicator_size/2);
      opacity: 0;
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;

    &:checked {

      ~ label {
        > .buffer {
          padding: 0;
        }

        position: relative;
        @include pb_card_selected;
        transition-property: none;
        transition-duration: 0s;

        .pb_selectable_card_circle {
          opacity: $opacity_10;
        }

        .separator {
          width: 2px;
          margin-right: 0px;
          background: $royal;
        }
      }
    }
  }

  &.dark {
    color: $white;
    > label {
      @include pb_card_dark;
      background: transparent;

      .pb_selectable_card_circle {
        border-color: $bg_dark;
        background: $primary-action;
      }
    }

    input[type="checkbox"],
    input[type="radio"] {
      &:checked ~ label {
        @include pb_card_selected_dark;
        background: transparent;
      }
    }

    .separator {
      background: rgba($white,.1);
    }

    &.error {
      > label {
        border-color: $error_dark;
      }
      .separator{
        background: $error_dark;
      }
    }
  }

  .separator {
    align-self: stretch;
    width: 1px;
    margin-right: 1px;
    margin-top: -1px;
    margin-bottom: -1px;
    background: $border_light;
  }

  &.error {
    > label {
      border-color: $error;
    }
    .separator {
      background: $error;
    }
  }
}