<commit_before>//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../button/button';
@import '../form/form';
@import '../loading/loading';
@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';

/// File uploader styles
/// @access private
/// @group file-uploader
@mixin file-uploader {
  .#{$prefix}--file {
    width: 100%;
  }

  .#{$prefix}--file--invalid {
    margin-right: $carbon--spacing-03;
    fill: $support-01;
  }

  // TODO: sync with type
  .#{$prefix}--file--label {
    @include reset;
    @include type-style('productive-heading-01');

    margin-bottom: $carbon--spacing-03;
    color: $text-01;
  }

  .#{$prefix}--file-input {
    @include hidden;
  }

  // This class is of old markup with "select file" button
  // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
  // TODO: deprecate this block
  .#{$prefix}--file-btn {
    display: inline-flex;
    margin: 0;
    padding-right: rem(64px);
  }

  .#{$prefix}--file-browse-btn {
    display: inline-block;
    width: 100%;
    max-width: rem(320px);
    margin-bottom: $carbon--spacing-03;
    color: $link-01;
    outline: 2px solid transparent;
    outline-offset: -2px;
    cursor: pointer;
    transition: $duration--fast-02 motion(standard, productive);

    &:focus,
    &:hover {
      outline: 2px solid $interactive-03;
    }

    &:hover,
    &:focus,
    &:active,
    &:active:visited {
      text-decoration: underline;
    }

    &:active {
      color: $text-01;
    }
  }

  .#{$prefix}--file-browse-btn--disabled {
    color: $disabled-02;
    text-decoration: none;
    cursor: no-drop;

    &:hover,
    &:focus {
      color: $disabled-02;
      text-decoration: none;
      outline: none;
    }
  }

  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
    border: 1px dashed $disabled-01;
  }

  .#{$prefix}--label-description {
    @include reset;
    @include type-style('body-short-01');

    margin-bottom: $carbon--spacing-05;
    color: $text-02;
  }

  // For backwards compatibility
  .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-06;
  }

  .#{$prefix}--btn ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-05;
  }

  .#{$prefix}--file .#{$prefix}--file-container,
  .#{$prefix}--file ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-03;
  }

  .#{$prefix}--file__selected-file {
    display: grid;
    grid-auto-rows: auto;
    grid-gap: $carbon--spacing-05;
    grid-template-columns: 1fr auto;
    align-items: center;
    max-width: rem(320px);
    min-height: $carbon--spacing-09;
    margin-bottom: $carbon--spacing-03;
    word-break: break-word;
    background-color: $field-01;

    &:last-child {
      margin-bottom: 0;
    }

    .#{$prefix}--form-requirement {
      grid-column: 1 / -1;
      max-height: none;
      margin: 0;
    }

    .#{$prefix}--loading {
      width: rem(32px);
      height: rem(32px);
      margin-right: -$carbon--spacing-03;
    }

    .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
      // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
      margin-right: 0;
    }

    .#{$prefix}--file-filename {
      @include type-style('body-short-01');

      margin-left: $carbon--spacing-05;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .#{$prefix}--file__selected-file--field {
    min-height: rem(40px);
  }

  .#{$prefix}--file__selected-file--sm {
    min-height: rem(32px);
  }

  // TODO: deprecate this block
  .#{$prefix}--file__selected-file--invalid__wrapper {
    @include focus-outline('invalid');

    max-width: rem(320px);
    margin-bottom: $carbon--spacing-03;
    background-color: $field-01;

    outline-width: 1px;
  }

  .#{$prefix}--file__selected-file--invalid {
    @include focus-outline('invalid');

    padding: $carbon--spacing-05 0;
  }

  .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
    padding-top: $carbon--spacing-05;
    border-top: 1px solid $ui-03;
  }

  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__title,
  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__supplement {
    @include type-style('label-01');

    padding: 0 $carbon--spacing-05;
  }

  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__supplement {
    color: $text-01;
  }

  // TODO: deprecate
  .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
    @include type-style('caption-01');

    display: block;
    max-height: rem(200px);
    padding: $carbon--spacing-03 $carbon--spacing-05;
    overflow: visible;
    color: $text-error;
    font-weight: 400;
  }

  .#{$prefix}--file__selected-file--invalid
    + .#{$prefix}--form-requirement
    .#{$prefix}--form-requirement__supplement {
    padding-bottom: $carbon--spacing-03;
    color: $text-01;
  }

  .#{$prefix}--file__state-container {
    display: flex;
    justify-content: center;
    min-width: 1.5rem;
    padding-right: $carbon--spacing-05;<commit_msg>fix(file-uploader): ensure form requirements are visible (#6867)<commit_after>//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../button/button';
@import '../form/form';
@import '../loading/loading';
@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';

/// File uploader styles
/// @access private
/// @group file-uploader
@mixin file-uploader {
  .#{$prefix}--file {
    width: 100%;
  }

  .#{$prefix}--file--invalid {
    margin-right: $carbon--spacing-03;
    fill: $support-01;
  }

  // TODO: sync with type
  .#{$prefix}--file--label {
    @include reset;
    @include type-style('productive-heading-01');

    margin-bottom: $carbon--spacing-03;
    color: $text-01;
  }

  .#{$prefix}--file-input {
    @include hidden;
  }

  // This class is of old markup with "select file" button
  // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
  // TODO: deprecate this block
  .#{$prefix}--file-btn {
    display: inline-flex;
    margin: 0;
    padding-right: rem(64px);
  }

  .#{$prefix}--file-browse-btn {
    display: inline-block;
    width: 100%;
    max-width: rem(320px);
    margin-bottom: $carbon--spacing-03;
    color: $link-01;
    outline: 2px solid transparent;
    outline-offset: -2px;
    cursor: pointer;
    transition: $duration--fast-02 motion(standard, productive);

    &:focus,
    &:hover {
      outline: 2px solid $interactive-03;
    }

    &:hover,
    &:focus,
    &:active,
    &:active:visited {
      text-decoration: underline;
    }

    &:active {
      color: $text-01;
    }
  }

  .#{$prefix}--file-browse-btn--disabled {
    color: $disabled-02;
    text-decoration: none;
    cursor: no-drop;

    &:hover,
    &:focus {
      color: $disabled-02;
      text-decoration: none;
      outline: none;
    }
  }

  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
    border: 1px dashed $disabled-01;
  }

  .#{$prefix}--label-description {
    @include reset;
    @include type-style('body-short-01');

    margin-bottom: $carbon--spacing-05;
    color: $text-02;
  }

  // For backwards compatibility
  .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-06;
  }

  .#{$prefix}--btn ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-05;
  }

  .#{$prefix}--file .#{$prefix}--file-container,
  .#{$prefix}--file ~ .#{$prefix}--file-container {
    margin-top: $carbon--spacing-03;
  }

  .#{$prefix}--file__selected-file {
    display: grid;
    grid-auto-rows: auto;
    grid-gap: $carbon--spacing-05;
    grid-template-columns: 1fr auto;
    align-items: center;
    max-width: rem(320px);
    min-height: $carbon--spacing-09;
    margin-bottom: $carbon--spacing-03;
    word-break: break-word;
    background-color: $field-01;

    &:last-child {
      margin-bottom: 0;
    }

    .#{$prefix}--form-requirement {
      display: block;
      grid-column: 1 / -1;
      max-height: none;
      margin: 0;
    }

    .#{$prefix}--loading {
      width: rem(32px);
      height: rem(32px);
      margin-right: -$carbon--spacing-03;
    }

    .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
      // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
      margin-right: 0;
    }

    .#{$prefix}--file-filename {
      @include type-style('body-short-01');

      margin-left: $carbon--spacing-05;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .#{$prefix}--file__selected-file--field {
    min-height: rem(40px);
  }

  .#{$prefix}--file__selected-file--sm {
    min-height: rem(32px);
  }

  // TODO: deprecate this block
  .#{$prefix}--file__selected-file--invalid__wrapper {
    @include focus-outline('invalid');

    max-width: rem(320px);
    margin-bottom: $carbon--spacing-03;
    background-color: $field-01;

    outline-width: 1px;
  }

  .#{$prefix}--file__selected-file--invalid {
    @include focus-outline('invalid');

    padding: $carbon--spacing-05 0;
  }

  .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
    padding-top: $carbon--spacing-05;
    border-top: 1px solid $ui-03;
  }

  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__title,
  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__supplement {
    @include type-style('label-01');

    padding: 0 $carbon--spacing-05;
  }

  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__title {
    color: $text-error;
  }

  .#{$prefix}--file__selected-file--invalid
    .#{$prefix}--form-requirement__supplement {
    color: $text-01;
  }

  // TODO: deprecate
  .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
    @include type-style('caption-01');

    display: block;
    max-height: rem(200px);
    padding: $carbon--spacing-03 $carbon--spacing-05;
    overflow: visible;
    color: $text-error;
    font-weight: 400;
  }

  .#{$prefix}--file__selected-file--invalid
    + .#{$prefix}--form-requirement
    .#{$prefix}--form-requirement__supplement {
    padding-bottom: $carbon--spacing-03;
    color: $text-01;
  }

  .#{$prefix}--file__state-container {
    display: flex;
    justify-content: center;
    min-width: 1.5rem;
    padding-right: $carbon--spacing-05;
{'fraction_non_alphanumeric': 0.18952729872218746, 'fraction_numerical': 0.025020105441872935, 'mean_word_length': 2.58258642765685, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '679408', 'n_tokens_mistral': 4228, 'n_tokens_neox': 3787, 'n_words': 691}