@import "./vars.pcss";

.btn {
  display: var(--btnDisplay);
  justify-content: var(--btnJustifyContent);
  align-items: var(--btnAlignItems);
  cursor: var(--btnCursor);
  font-size: var(--btnFontSize);
  line-height: var(--btnLineHeight);
  font-weight: var(--btnFontWeight);
  text-align: var(--btnTextAlign);
  text-transform: var(--btnTextTransform);
  text-decoration: var(--btnTextDecoration);
  color: var(--btnTextColor);
  background: var(--btnBg);
  box-shadow: var(--btnBoxShadow);
  height: var(--btnHeight);
  padding: var(--btnVertPaddings) var(--btnHorPaddings);
  border-color: var(--btnBorderColor);
  border-width: var(--btnBorderWidth);
  border-style: var(--btnBorderStyle);
  border-radius: var(--btnBorderRadius);
  opacity: var(--btnOpacity);
  width: var(--btnWidth);
  outline: var(--btnOutline);
  user-select: var(--btnUserSelect);
  appearance: var(--btnAppearance);
  aspect-ratio: var(--btnAspectRatio);

  @mixin transition var(--btnTransition);

  &&--isLight {
    --btnTextColor: var(--deUIColorDenim);
    --btnBg: transparent;
    --btnBorderColor: var(--btnBg);

    --btnHoverTextColor: var(--btnTextColor);
    --btnHoverBg: var(--deUIColorLinkWater);
    --btnHoverBorderColor: var(--btnHoverBg);

    --btnDisabledBg: transparent;
    --btnDisabledTextColor: var(--deUIColorBlueHaze);
    --btnDisabledBorderColor: transparent;
  }

  &&--isOutline {
    --btnTextColor: var(--deUIColorDenim);
    --btnBg: transparent;
    --btnBorderColor: var(--deUIColorDenim);

    --btnHoverTextColor: var(--deUIColorVeniceBlue);
    --btnHoverBg: transparent;
    --btnHoverBorderColor: var(--deUIColorVeniceBlue);

    --btnDisabledBg: transparent;
    --btnDisabledTextColor: var(--deUIColorBlueHaze);
    --btnDisabledBorderColor: var(--deUIColorBlueHaze);
  }

  &&--isSizeSmall {
    --btnHeight: var(--btnSizeSmallHeight);
    --btnHorPaddings: var(--btnSizeSmallHorPaddings);
  }

  &&--isSizeMedium {
    --btnHeight: var(--btnSizeMediumHeight);
    --btnHorPaddings: var(--btnSizeMediumHorPaddings);
  }

  &&--isSizeLarge {
    --btnHeight: var(--btnSizeLargeHeight);
    --btnHorPaddings: var(--btnSizeLargeHorPaddings);
    --btnFontSize: var(--btnSizeLargeFontSize);
  }

  &&--isSizeMax {
    --btnHeight: var(--btnSizeMaxHeight);
    --btnHorPaddings: var(--btnSizeMaxHorPaddings);
    --btnFontSize: var(--btnSizeMaxFontSize);
  }

  &&--isSizeAuto {
    --btnHeight: auto;
    --btnFontSize: 1em;
    --btnHorPaddings: 1em;
    --btnVertPaddings: .5em;
    --btnLineHeight: 1;
  }

  &&--isOnlyIcon {
    --btnIconMargin: 0;
    --btnHorPaddings: 0;
    --btnVertPaddings: 0;
    --btnLineHeight: 0;
    --btnAspectRatio: 1;

    .btn__label {
      @mixin visuallyHidden;
    }
  }

  * {
    pointer-events: none;
  }

  &&--isDisabled,
  &[disabled] {
    cursor: var(--btnDisabledCursor);
    background: var(--btnDisabledBg);
    color: var(--btnDisabledTextColor);
    border-color: var(--btnDisabledBorderColor);
  }

  &&--isHover,
  &:hover {
    /* stylelint-disable */
    &:not([disabled], .btn--isDisabled) {
      @media (hover: hover) {
        background: var(--btnHoverBg);
        border-color: var(--btnHoverBorderColor);
        color: var(--btnHoverTextColor);
      }
    }
    /* stylelint-enable */
  }

  &&--isActive,
  &:active {
    /* stylelint-disable */
    &:not([disabled], .btn--isDisabled) {
      background: var(--btnActiveBg);
      color: var(--btnActiveTextColor);
      border-color: var(--btnActiveBorderColor);
    }
    /* stylelint-enable */
  }

  &__icon {
    line-height: var(--btnIconLineHeight);

    @mixin noc {
      @mixin nfc {
        margin-left: var(--btnIconMargin);
      }
      @mixin nlc {
        margin-right: var(--btnIconMargin);
      }
    }
  }
}