@use "sb-element/core/spacing";
@use "sb-element/core/transitioning";
@use "sb-element/core/border";
/*****************************************************************************
File Input / Style
******************************************************************************/

// SIZE
@mixin file-input-size($size, $value) {
  &.sb--#{$size} {
    height: $value;
    width: calc($value * 5);
    label {
      height: 100%;
      width: 100%;
      line-height: $value;
    }

    &.pill label {
      @include border.radius(calc($value / 2));
    }
  }
}

// ROOT
.sb-file-input {
  display: block;

  input {
    display: none;
  }

  label {
    display: inline-block;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;

    @include transitioning.ease(300ms, background, color);
    @include border.radius(s);
    @include spacing.padding-x(s);
  }

  &.disabled label {
    cursor: not-allowed;
  }

  @include spacing.for-each-size using ($size, $value) {
    @include file-input-size($size, $value);
  }
}