@import '../_variables';

@mixin off-screen-styles() {
  position: fixed !important;
  border: none !important;
  height: 1px !important;
  width: 1px !important;

  left: 0 !important;
  top: -1px !important;

  overflow: hidden !important;
  visibility: hidden !important;

  padding: 0 !important;
  margin: 0 0 -1px 0 !important;
}

@mixin control-label() {
  position: absolute;
  top: $controls-padding;
  left: calc(#{$controls-padding} + 1px); // With the borders we need to add 1px.
  margin-bottom: 0;
  height: 1.25rem; // 20px
  line-height: 1.25rem; // 20px
  font-size: $font-size-base;
  color: $gray-500;
  font-weight: $font-weight-bold;
  transform-origin: 0 0;
  transition: transform 0.2s ease;
  font-family: inherit;
  z-index: $zindex-label;
  @include text-truncate();

  .fui-label-required-star {
    padding-left: 5px;
  }

  .fui-placeholder {
    display: inline-block;
    font-style: italic;
    font-weight: $font-weight-normal;
    padding-left: 5px;
  }
}

@mixin control-label-selected() {
  font-weight: $font-weight-normal;
  transform: translateY(calc(-0.85 * (#{$controls-padding} - #{$controls-filled-padding}))) scale(0.85);
}

@mixin control-small-label() {
  position: absolute;
  top: calc(#{$controls-small-padding} + 1px);
  left: calc(#{$controls-small-padding} + 1px); // With the borders we need to add 1px.
  margin-bottom: 0;
  height: auto;
  line-height: normal;
  font-size: $font-size-sm;
  color: $gray-500;
  font-weight: $font-weight-normal;
  font-family: inherit;
  z-index: $zindex-label;
  @include text-truncate();

  .fui-label-required-star {
    padding-left: 5px;
  }

  .fui-placeholder {
    display: inline-block;
    font-style: italic;
    font-weight: $font-weight-normal;
    padding-left: 5px;
  }
}

@mixin control-small-label-selected() {
  display: none !important;
}