@use "sass:math";
@use "pkg:@ohu-mobile/styles" as *;
@use "./variables" as *;

@mixin tap-component {
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  // for mobile outline is useless
  outline: none;
}

@mixin mobile-btn-init {
  @include tap-component();
  white-space: nowrap;
  border: none;
  transition: all .3s;
  overflow: visible;
}

@mixin checkbase(
  $name,
  $color,
  $labelColor: $checkboxLabelColor,
  $fontSize: $checkboxFontSize,
) {
  .#{$prefix}#{$name} {
    font-size: $fontSize;
    position: relative;
    &-wrapper {
      display: inline-flex;
      flex-flow: row nowrap;
      align-items: center;
      cursor: pointer;
      @include tap-component;
      &.is-disabled {
        cursor: not-allowed;
        >.#{$prefix}#{$name} {
          cursor: not-allowed;
        }
        input {
          cursor: not-allowed;
        }
        .#{$prefix}icon {
          opacity: .4;
        }
        .#{$prefix}#{$name}__label {
          color: $color;
        }
      }
    }
    > input {
      top: 0;
      left: 0;
      position: absolute;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
    }
    > i {
      display: inline-block;
      font-size: 1.4em;
      vertical-align: -.125em;
      width: 1em;
      height: 1em;
      transition: all .4s easing(out-expo);
    }
    > .#{$prefix}icon {
      color: $color;
      font-size: 1.4em;
      vertical-align: -.2em;
      transition: all .4s easing(out-expo);
    }
    &__label {
      padding-left: .375em;
      padding-right: .375em;
      font-size: 1em;
      font-weight: 400;
      color: $labelColor;
    }
  }
}