.form-control {
  font-family: $desktop-font;
  background: $gray-800;
  border: 2px solid $gray-400;
  box-shadow: inset 0 2px 2px rgba($black, 0.08);
  color: $text-white;
  font-size: $desktop-font-size;
  border-radius: $border-radius * 1.05;
  padding: $spacing/1.5 $spacing/2;
  text-shadow: none;

  &.append {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:disabled {
    border-color: rgba($black, 0.2);
    box-shadow: none;
  }

  &:not(:disabled) {
    &:focus {
      border-color: $gray-600;
      box-shadow: 0 2px 3px rgba($black, 0.2);
      color: $text-white;
    }
  }
}

.form-legend {
  margin-bottom: $spacing;
}

.form-legend-title {
  color: $text-white;
  font-size: $font-size-large;
  font-weight: $font-weight-bold;
}

.form-legend-content {
  border-top: 1px solid $border-gray-light;
  margin-top: $spacing/2;
  padding-top: $spacing/2;
}

.form-control-font {
  font-family: $desktop-font;
  background: $gray-800;
  border: 2px solid $gray-400;
  box-shadow: inset 0 2px 2px rgba($black, 0.08);
  color: $text-white;
  font-size: $desktop-font-size;
  border-radius: $border-radius * 1.05;
  padding: $spacing/1.5 $spacing/2;
  text-shadow: none;

  &:active,
  &:focus {
    color: $text-white;
    border: 2px solid $gray-600;
    box-shadow: 0 2px 3px rgba($black, 0.1);
  }
}

.meeting-id-control {
  font-family: $desktop-font;
  background: $gray-800;
  border: 2px solid $gray-400;
  box-shadow: inset 0 2px 2px rgba($black, 0.08);
  color: $text-white;
  font-size: $desktop-font-size;
  border-radius: $border-radius * 1.05;
  padding: $spacing/1.5 $spacing/2;
  text-shadow: none;

  &:active,
  &:focus {
    color: $text-white;
    border: 2px solid $gray-600;
    box-shadow: 0 2px 3px rgba($black, 0.1);
  }
}