@import '../style/mixins/index.scss';
@import '../style/variables/default.scss';
@import '../styles/theme.scss';

.at-selection {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  position: relative;
  color: $paletteTextPrimary;
  padding-right: #{$spacingUnit * 2}px;

  &__container {
    position: relative;
    padding: 0px #{$spacingUnit * 2}px;
  }

  &__selection {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
  }

  &__mask {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: $zindex-form;
  }

  &--disabled {
    pointer-events: none;
    .at-selection__selection,
    .checkbox,
    .radio {
      opacity: $opacity-disabled;
    }

    .at-selection__mask {
      display: block;
    }
  }

  &.default {
    .point {
      background: $paletteGrey500;
    }
    .checkbox {
      &.checked {
        background: $paletteGrey500;
        border-color: $paletteGrey500;
        color: $paletteCommonWhite;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteGrey500;
      }
    }
  }
  &.primary {
    .point {
      background: $palettePrimaryMain;
    }
    .checkbox {
      &.checked {
        background: $palettePrimaryMain;
        border-color: $palettePrimaryMain;
        color: $palettePrimaryContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $palettePrimaryMain;
      }
    }
  }
  &.secondary {
    .point {
      background: $paletteSecondaryMain;
    }
    .checkbox {
      &.checked {
        background: $paletteSecondaryMain;
        border-color: $paletteSecondaryMain;
        color: $paletteSecondaryContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteSecondaryMain;
      }
    }
  }
  &.error {
    .point {
      background: $paletteErrorMain;
    }
    .checkbox {
      &.checked {
        background: $paletteErrorMain;
        border-color: $paletteErrorMain;
        color: $paletteErrorContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteErrorMain;
      }
    }
  }
  &.success {
    .point {
      background: $paletteSuccessMain;
    }
    .checkbox {
      &.checked {
        background: $paletteSuccessMain;
        border-color: $paletteSuccessMain;
        color: $paletteSuccessContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteSuccessMain;
      }
    }
  }
  &.warning {
    .point {
      background: $paletteWarningMain;
    }
    .checkbox {
      &.checked {
        background: $paletteWarningMain;
        border-color: $paletteWarningMain;
        color: $paletteWarningContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteWarningMain;
      }
    }
  }
  &.progress {
    .point {
      background: $paletteProgressMain;
    }
    .checkbox {
      &.checked {
        background: $paletteProgressMain;
        border-color: $paletteProgressMain;
        color: $paletteProgressContrastText;
      }
    }
    .radio {
      &.checked {
        border-color: $paletteProgressMain;
      }
    }
  }

  &.default,
  &.primary,
  &.secondary,
  &.error,
  &.success,
  &.warning,
  &.progress {
    .checkbox,
    .radio,
    .point {
      transition: all 200ms $transitionsEasingEaseInOut 0ms;
    }
  }

  .checkbox,
  .radio {
    line-height: 100%;
    font-size: 32px;
    line-height: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 2px solid $paletteTextPrimary;
    border-radius: 0;
    width: 32px;
    height: 32px;
  }

  .radio {
    border-radius: 50%;
  }

  .point {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
}
.checkbox-group,
.radio-group {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  // justify-items: flex-start;

  &.vertical {
    flex-direction: column;
  }

  .at-selection {
    margin-right: #{$spacingUnit * 2}px;
  }
}