form {
  padding-bottom: 30px;
  position: relative;

  fieldset {
    transition: $transition-base;
    transform: scale(1, 1);
    opacity: 1;
    padding: 0;
    margin: 0;
    border: 0;

    &.hidden {
      transform: scale(0, 0);
      opacity: 0;
      height: 0;
    }

    &[disabled] {
      input,
      textarea,
      select,
      ul,
      ul li,
      .list-container ul li:not(last-child),
      .dropdown {
        background-color: $light;
        cursor: no-drop;
        border: none;
        color: $dark;
      }
    }
  }

  .button-container {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: flex-end;

    button {
      margin: 0 5px;

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

    &.centered {
      justify-content: center;
    }
  }

  .dropdown {
    margin-right: 0;

    select {
      border-radius: 0;
      border: 2px solid $gray-400;
      background-color: transparent;
      padding: 5px 15px;
      height: 40px;
      min-width: 203px;
    }
  }

  label {
    display: inline-block;
    float: right;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .input-container,
  .list-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;

    label {
      margin-bottom: 0;
    }

    p {
      color: $red;
    }

    ul {
      width: 100%;
      border: 2px solid $gray-400;
    }

    li {
      color: $gray-400;

      &.active {
        color: $dark;
      }

      &:not(:last-child) {
        border-bottom: 2px solid $gray-400;
      }
    }

    input,
    textarea,
    select,
    .dropdown {
      width: 100%;
      cursor: pointer;
    }
  }

  &.disabled {
    pointer-events: none;
    filter: grayscale(100%);
    opacity: 0.5;
  }

  input,
  textarea,
  select {
    transition: $transition-base;

    &:focus {
      border-color: $dark;
    }
  }
}