.ui.form {
  select.dropdown {
    display: block;
    height: 48px;
    margin-top: 7px;
    border-radius: var(--fw-border-radius);
    font-size: 14px;
    font-family: $font-main;
    line-height: 28px;
    border: 12px solid transparent;
    padding: 0px 12px;
    color: var(--input-color);
    -webkit-transition: color .1s ease, border-color .1s ease;
    transition: color .1s ease, border-color .1s ease;

    @include light-theme {
      color: var(--fw-gray-800);
      background-color: var(--fw-gray-200);
      border-color: transparent;
    }

    @include dark-theme {
      color: var(--fw-gray-300);
      background-color: var(--fw-gray-850);
      border-color: var(--fw-gray-850);
    }
  }
  label {
    font-size: 14px;
    font-weight: 600;
    align-self: baseline;
  }
}

.ui.checkbox label {
  cursor: pointer;
  color: var(--text-color);
}

input + .help {
  margin-top: 0.5em;
}

.component-form {
  .parent.checkbox {
    margin: 1em 0;
  }
  .child.checkbox {
    margin-left: 1em;
  }
}

.ui.labeled.input {
  input,
  .label {
    background-color: var(--input-background);
    &::placeholder {
      color: var(--input-placeholder-color);
    }
  }
}

.ui.icon.input > .icon {
  color: var(--input-color);
}

#updatePlaylistLabel {
  display: block;
  margin: 0 0 0.28571429rem 0;
  color: var(--form-label-color);
  font-size: 0.92857143em;
  font-weight: bold;
  text-transform: none;
}

#updatePlaylistLabel:before {
  content: "\200b";
}

.ui.toggle.checkbox label::before {
  background-color: var(--input-selection-background);
}
