@use '_variables' as *;
@use '_mixins' as *;

$form-base-input-width: 340px;

form {
  padding-bottom: 1.5rem;
}

my-markdown-textarea {
  display: block;
  max-width: 500px;
}

.homepage my-markdown-textarea {
  display: block;
  max-width: 90%;

  ::ng-deep textarea {
    height: 300px !important;
  }
}

input[type=text],
input[type=number] {
  @include peertube-input-text($form-base-input-width);

  display: block;
}

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

  input[type=number] + span {
    position: absolute;
    top: 0.2em;
    right: 2.5rem;

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

  input[disabled] {
    background-color: #f9f9f9;
    pointer-events: none;
  }
}

input[type=checkbox] {
  @include peertube-checkbox(1px);
}

.peertube-select-container {
  @include peertube-select-container($form-base-input-width);
}

my-select-options,
my-select-custom-value,
my-select-checkbox {
  @include responsive-width($form-base-input-width);

  display: block;
}

input[type=submit] {
  @include peertube-button;
  @include orange-button;
  @include margin-left(auto);

  display: flex;

  + .form-error {
    @include margin-left(5px);

    display: inline;
  }
}

.inner-form-title {
  @include settings-big-title;
}

.inner-form-description {
  font-size: 15px;
  margin-bottom: 15px;
}

textarea {
  @include peertube-textarea(500px, 150px);

  max-width: 100%;
  display: block;

  &.small {
    height: 75px;
  }
}

.label-small-info {
  font-style: italic;
  margin-bottom: 10px;
  font-size: 14px;
}

.disabled-checkbox-extra {
  &,
  ::ng-deep label {
    opacity: .5;
    pointer-events: none;
  }
}

input[disabled] {
  opacity: 0.5;
}

ngb-tabset:not(.previews) ::ng-deep {
  .nav-link {
    font-size: 105%;
  }
}

.submit-error {
  margin-bottom: 20px;
}

.alert-signup {
  width: fit-content;
  margin-top: 10px;
}

.callout-container {
  position: absolute;
  display: flex;
  height: 0;
  width: 100%;
  justify-content: right;

  .callout-link {
    @include peertube-button-link;

    position: relative;
    right: 3.3em;
    top: .3em;
    font-size: 90%;
    color: pvar(--mainColor);
    background-color: pvar(--mainBackgroundColor);
    padding: 0 .3em;
  }
}

my-user-real-quota-info {
  display: block;
  margin-top: 5px;
  font-size: 11px;
}