@import "variables";

.dropdowns-wrapper {
  margin-bottom: $padding-xl;
  text-align: center;

  // The dropdown label
  .dropdown > .dropdown-toggle {
    padding-bottom: $padding-xs;
    border-bottom: 2px solid $alt-link-hover-underline;
    white-space: nowrap;

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  // On TINY devices, dropdowns are full-width, one per line,
  // and the "Validate!" button is displayed below the dropdowns
  .dropdown {
    display: block;
    margin-bottom: $padding-lg;

    .dropdown-menu {
      width: 100%;
      text-shadow: none;

      .checkbox {
        margin: 0;
      }
    }
  }

  .button-wrapper {
    display: block;
  }

  // On LESS TINY devices, dropdowns are displayed on two lines
  @media (min-width: $breakpoint-xs) {
    .dropdown {
      display: inline-block;
      margin-bottom: 0;

      + .dropdown {
        margin-left: $padding-md;
      }

      .dropdown-menu {
        width: auto;
      }
    }

    .keep-together {
      display: inline-block;
      margin-bottom: $padding-lg;
      white-space: nowrap;

      + .keep-together {
        margin-left: $padding-md;
      }
    }
  }

  // On SMALL devices, the "Validate!" button moves to the right-hand side of the dropdowns
  @media (min-width: $breakpoint-sm) {
    position: relative;
    padding-right: 205px; // This is wide enough for "Dereference it!"

    .keep-together {
      margin-bottom: 0;

      + .keep-together {
        margin-top: $padding-lg;
      }
    }

    .button-wrapper {
      position: absolute;
      right: 0;
      top: $padding-md;
    }
  }

  // On MEDIUM devices, all the dropdowns are displayed on a single line
  @media (min-width: $breakpoint-md) {
    .keep-together,
    .keep-together + .keep-together {
      // vertically-center the dropdowns
      margin-top: $padding-sm;
      margin-bottom: $padding-sm;
    }

    .button-wrapper {
      top: 0;
    }
  }
}
