@use "_variables" as *;
@use "_mixins" as *;
@use "_form-mixins" as *;

.peertube-radio-container {
  @include peertube-radio-container;
}

.peertube-select-container {
  @include peertube-select-container(auto);
}

.pt-input-text {
  @include peertube-input-text(100%);
}

.form-group {
  margin-bottom: 1.5rem;
}

.input-error:not(:focus) {
  &,
  + .nav-preview,
  // Markdown textarea
  + * + .tab-content {
    border-color: pvar(--red) !important;
  }
}

.input-group .input-error {
  z-index: 3;
}

.form-error,
.form-warning {
  display: block;
  margin-top: 5px;
  font-size: 0.9em;
}

.form-error {
  color: pvar(--red);
}

// Disable red error on input focus
.input-error:focus,
.input-group:focus-within {
  + .form-error,
  + * + .form-error,
  // Markdown textarea
  + * + * + .form-error {
    color: pvar(--fg);
  }
}

.form-group-description {
  font-size: 14px;
  margin-top: 10px;

  @include muted-2;
}

// Useful with a "reset" button
.label-container {
  display: flex;
  white-space: nowrap;
  align-items: baseline;
}

label,
.label {
  font-weight: $font-bold;
  margin-bottom: 0.5rem;
  font-size: 18px;
  color: pvar(--fg-300);
}

.label-inline {
  display: inline;
  font-size: 1rem;
  color: pvar(--fg-200);
  font-weight: normal;
  margin-bottom: 0;

  @include margin-right(0.75rem);
}

label + .form-group-description,
label + my-help + .form-group-description,
.label + .form-group-description,
.label-container + .form-group-description {
  margin-bottom: 10px;
  margin-top: -0.4rem;
}

.number-with-unit {
  position: relative;
  width: fit-content;

  input[type="number"] + span {
    position: absolute;
    top: 0.4em;
    right: 3em;

    @media screen and (max-width: $mobile-view) {
      display: none;
    }
  }

  input[disabled] {
    opacity: 0.8;
    pointer-events: none;
  }
}
