@import 'variables/gutters';

$ui__color--gray-20: #efefef;

.ui-file-upload {
  &__label {
    ::ng-deep .digi-form-label {
      margin-bottom: $digi--layout--gutter--s;
      margin-top: $digi--layout--gutter--m;
    }
  }

  &__file-row {
    display: inline-flex;
    width: 100%;
    margin-bottom: $digi--layout--gutter;
  }

  &__input {
    display: none;
  }

  &__file-row-container {
    margin-bottom: 0;
    margin-top: $digi--layout--gutter--l;
  }

  &__file-name {
    font-family: var(--digi--typography--font-family);
    flex: 1;
    background-color: $ui__color--gray-20;
    color: var(--digi--typography--color--text);
    max-width: u(60);
    padding: u(1);
    font-weight: var(--digi--typography--font-weight--semibold);
    margin-right: u(1.6);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__status-message {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  &__icon-remove {
    --digi--ui--width--icon: 100%;
  }

  &__validation-message {
    display: block;
    margin-top: var(--digi--layout--gutter--s);
  }
}
