/* ==========================================================================
 * File Upload
 * ========================================================================== */

.mds-c-file-upload {
  cursor: pointer;
  display: inline-block;

  &.mds-is-disabled {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
  }

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  &--block {
    display: block;
    width: 100%;
  }
}

.mds-c-file-upload__input {
  @mixin mds-m-screenreader-text;

  display: block;
  opacity: 0;
}

.mds-c-file-upload__content {
  .mds-c-file-upload__input:focus ~ & {
    outline: 2px solid var(--mds-d-color-brand--primary);
  }
}

.mds-c-file-upload__box {
  align-items: center;
  border: 2px dashed var(--mds-t-border-color--primary);
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-text-color--tertiary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  min-height: 5rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;

  &.mds-has-drag {
    background-color: var(--mds-t-color--green-muted);
    border-color: var(--mds-t-color--green);
  }

  &:enter,
  .mds-c-file-upload__input:focus ~ & {
    border: 2px dashed var(--mds-t-text-color--accent);
    outline: none;
  }

  > * {
    pointer-events: none;
  }
}

.mds-c-file-upload__label {
  @mixin mds-m-heading--size-med;

  color: var(--mds-t-text-color--tertiary);

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  .mds-has-drag & {
    color: var(--mds-t-color--green);
  }
}