@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.storybook-checkbox--container {
  display: flex;
  align-items: center;

  .storybook-checkbox--overlay {
    margin-right: 8px;
    border-radius: 3px;
  }

  .storybook-checkbox--check {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    // box-shadow: inset 0px 3px 6px $shadow; //standard as mentioned in approval-flow doc
    border: 1.5px solid $grey_1;
    border-radius: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: $primary;
    display: flex;
    align-items: center;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    &::after {
      content: '';
      width: 5px;
      height: 8px;
      border-bottom: 2px solid $white;
      border-right: 2px solid $white;
      border-radius: 1px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -60%) rotate(45deg);
      opacity: 0;
      transition: opacity 0.3s;
    }

    &:checked {
      background-color: $primary;
      border-color: $primary;

      &::after {
        opacity: 1;
      }
    }
  }

  .storybook-checkbox--partial {
    @extend .storybook-checkbox--check;

    background-color: $primary;
    border-color: $primary;

    &::after {
      width: 0;
      height: 8px;
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 1;
    }
  }
}

.storybook-checkbox--text-container {
  @extend .fontPoppinsRegularSm;
}