@import "../../styles/themes.scss";
@import "../../styles/typography.scss";

.monday-style-radio-button-component {
  display: grid;
  grid-template-columns: 1.5em auto;
  grid-gap: 0.5em;
  cursor: pointer;

  &__radio-input-container {
    display: flex;
    align-items: center;
    justify-content: center;

    &__radio-input {
      opacity: 0;
      width: 0;
      height: 0;
      margin: 0;
    }

    &__radio-control {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      border: 0.1em solid;
      @include theme-prop(border-color, ui-border-color);
      border-radius: 50%;
      transition: border-width 100ms $expand-animation-timing;
    }

    input:checked + &__radio-control {
      animation-name: radio-checked-animation;
      animation-duration: 100ms;
      animation-timing-function: $expand-animation-timing;
      animation-fill-mode: forwards;
      @include theme-prop(border-color, primary-color);
      border-width: 0.3em;
    }

    input:disabled + &__radio-control {
      border: 0.5em solid;
      @include theme-prop(border-color, disabled-background-color);
      border-radius: 50%;
    }

    input:checked:disabled + &__radio-control {
      border: 0.3em solid;
      @include theme-prop(border-color, disabled-background-color);
      @include theme-prop(background-color, secondary-text-color);
    }
  }

  &__radio-label {
    line-height: 21px;
    font-weight: 400;
    @include theme-prop(color, primary-text-color);
  }

  &.disabled {
    cursor: not-allowed;
    .monday-style-radio-button-component__radio-label {
      @include theme-prop(color, disabled-text-color);
    }
  }

  &:hover &__radio-input-container input:enabled:checked + &__radio-input-container__radio-control {
    @include theme-prop(border-color, primary-hover-color);
  }

  &:hover &__radio-input-container input:enabled:not(:checked) + &__radio-input-container__radio-control,
  &:focus-within &__radio-input-container input:enabled:not(:checked) + &__radio-input-container__radio-control {
    @include theme-prop(border-color, primary-text-color);
  }

  &__radio-input-container input:focus-visible + &__radio-input-container__radio-control {
    outline: none;
    @include theme-prop(border-color, primary-color);
    box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);
    border-radius: 50%;
  }
}

@keyframes radio-checked-animation {
  0% {
    height: 1em;
    width: 1em;
  }
  50% {
    height: 0.8em;
    width: 0.8em;
  }
  100% {
    height: 1em;
    width: 1em;
  }
}