@use "sass:math";

@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;

$pb_selectable_space_classes: (
  xxs: $space_xxs,
  xs: $space_xs,
  sm: $space_sm,
  md: $space_md,
  lg: $space_lg,
  xl: $space_xl,
);
$pb_selectable_paddings: (
  p: "padding",
  pr: "padding-right",
  pl: "padding-left",
  pt: "padding-top",
  pb: "padding-bottom",
  px: ("padding-left", "padding-right"),
  py: ("padding-top", "padding-bottom")
);

[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: (math.div($pb_selectable_card_indicator_size, 2)) + (math.div($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: -(math.div($pb_selectable_card_indicator_size, 2));
      right: -(math.div($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;
        padding: calc(#{$space_sm} - 1px);
        transition-property: none;
        transition-duration: 0s;

        .pb_selectable_card_circle {
          opacity: $opacity_10;
        }

        .separator {
          background: $royal;
        }
        .psuedo_separator {
          background-color: $royal;
        }
      }

      // Selected card has 1px more border
      // Remove 1px so content does not "jump"
      @each $position_name,
      $position in $pb_selectable_paddings {
        @each $space_name,
        $space in $pb_selectable_space_classes {
          ~ label.#{$position_name}_#{$space_name} {
            @if type-of($position)=="list" {
              @each $coordinate in $position {
                #{$coordinate}: calc(#{$space} - 1px) !important;
              }
            }

            @else {
              #{$position}: calc(#{$space} - 1px) !important;
            }
          }
        }
      }
    }
  }

  &.display_input {
    input[type="checkbox"],
    input[type="radio"] {
      &:checked {
        ~label {
          border-width: $pb_card_border_width;
          outline: 1px solid $primary;
        }

      }
    }

    > label {
      outline: 1px solid transparent;
      padding: $space_sm;
    }

    &.dark {
      input[type="checkbox"],
      input[type="radio"] {
        &:checked ~ label {
          border-width: $pb_card_border_width;
          outline: 1px solid $primary_action_dark;
        }
      }
    }
  }

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

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

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

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

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

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

  .psuedo_separator {
    align-self: stretch;
    padding-right: 1px;
  }

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