@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.multi-upload-modal-container {
  section {
    padding: 40px;
    margin-top: 40px;

    @include box-shadow(0, 0, 6px, rgba(var(--color-dark-rgb), 0.1));

    .title {
      margin-bottom: var(--spacing-l);
      font-size: 20px;
    }
  }

  .submit {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }

  .uploading {
    display: flex;
    align-items: center;

    :deep(.loader-ui) {
      width: 20px;
      height: 20px;
      padding: 0;
      margin-right: var(--spacing-s);
    }
  }

  .actions {
    display: flex;
    align-items: center;

    > * {
      margin-right: var(--spacing-l);

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

    .post,
    .cancel {
      font-size: var(--font-size-h5);
    }

    .post {
      padding: var(--spacing-s) var(--spacing-m);
      border-radius: 20px;
      background: var(--color-valid);
      border: 1px solid var(--color-valid);

      &:hover {
        color: var(--color-valid);
        background: var(--color-light);
      }
    }

    .cancel {
      color: var(--color-grey-400);

      @include transition(color 0.4s);

      &:hover {
        color: var(--color-invalid);
      }
    }
  }

  .input-date {
    .input-choices {
      flex-wrap: wrap;

      > label {
        display: block;
        width: 100%;
      }
    }
  }

  .vue-dropzone.dropzone {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: var(--spacing-l);

    .dz-preview {
      width: auto;
    }

    .dz-message {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      transform: translate(-50%, -50%);
    }

    .dz-remove {
      color: var(--color-light);

      &:hover {
        color: var(--color-light);
      }
    }
  }

  :deep(.input-selectbox .input-choices.input--placeholder > label),
  :deep(.input-selectbox .input-choices.input--focused > label),
  :deep(.input-selectbox .input-choices.input--filled > label) {
    color: var(--color-valid);
  }

  :deep(.input-radio .input-choices) {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    > label {
      width: 100%;
    }

    .radio:not(:first-of-type) {
      margin: 0 0 0 var(--spacing-l);
    }

    .radio > input {
      + .radio-label::before {
        border-color: var(--color-admin);
      }

      &:checked + .radio-label::before {
        background: var(--color-admin);
      }
    }
  }
}
