@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';

// Forms
.form-wrapper {
  padding: 0 20px;
}

.input-wrapper {
  margin-bottom: 20px;

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

  input {
    width: 100%;
    color: $text;

    &.is-error {
      border-color: $danger;
      box-shadow: 0 0 7px rgba($danger, 0.3);
    }
  }
}

.inline-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.icon-append {

    .input-text {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .icon {
      background: black;
      padding: 15px 18px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      text-align: center;
      line-height: 0;

      path, polyline {
        stroke: white;
      }
    }
  }
}

.input-label {
  @include font-size(12);
  color: $text;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

@media (prefers-color-scheme: dark) {

  .inline-wrapper {

    &.icon-append {

      .icon {
        background: rgba($theme, 0.1);

        path, polyline {
          stroke: $theme;
        }
      }
    }
  }

  .input-label {
    color: $dark_mode_text_primary;
  }
}