@import '../../scss/styles.scss';

.upload {
  position: relative;
  max-width: 100%;

  &__wrap {
    background: var(--theme-elevation-50);
    padding: base(1);
  }

  &__buttons {
    margin: base(-0.25);
    width: calc(100% + #{base(0.5)});
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: base(0.25);

    .btn {
      margin: 0;
    }
  }

  &__toggler {
    min-width: base(7);
  }

  @include mid-break {
    &__wrap {
      padding: base(0.75);
    }

    &__toggler {
      width: calc(100% - #{base(0.5)});
    }
  }
}

html[data-theme='light'] {
  .upload {
    &.error {
      .upload__wrap {
        @include lightInputError;
      }

      .btn--style-secondary {
        background-color: var(--theme-error-100);
        box-shadow: inset 0 0 0 1px var(--theme-error-500);
      }
    }
  }
}

html[data-theme='dark'] {
  .upload {
    &.error {
      .upload__wrap {
        @include darkInputError;
      }

      .btn--style-secondary {
        background-color: var(--theme-error-150);
        box-shadow: inset 0 0 0 1px var(--theme-error-500);
      }
    }
  }
}
