.spinner-wrapper {
  height: 1.2rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
}

.spinner {
  height: 1rem;
  width: 1rem;

  border-radius: 100%;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;

  animation: spin 1s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.apply-form input,
.apply-form textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
}

.social-media-link {
  display: flex;
}

/* When there's only one social media link, hide the emove button */
.social-media-link:only-child button {
  display: none;
}

.social-media-link:not(:first-of-type) {
  margin-top: 0.4em;
}

.highlight {
  border: thin solid red;
}

.social-media-element .button {
  width: 1.4em;
  background: transparent;
}

.apply-form input:not([type="file"]),
.apply-form textarea {
  font-family: inherit;
  background: transparent;
  border: thin solid #333;
  padding: 0.3em 0.4em;

  width: 100%;

  resize: none;

  transition: background-color 125ms ease;
}

.apply-form input:not([type="file"]):focus,
.apply-form textarea:focus {
  outline: none;
}

.wrapper {
  padding: 20px;
}

/* FORM */
.apply-form {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-column-gap: 2em;
  font-size: 16px;
}

/* ========== FORM SECTIONS ========== */
.apply-form__dropdowns {
  display: flex;
  flex-wrap: wrap;
}

.apply-form__dropdowns .apply-form__element {
  flex: 1;
}

.apply-form__names {
  grid-column: 1 / 13;
}

.apply-form__details {
  grid-column: 1 / 6;
}

.apply-form__files {
  grid-column: 6 / 11;
}

.apply-form__submit {
  position: relative;
  grid-column: 11 / 14;
}

@media screen and (max-width: 750px) {
  .apply-form__details {
    grid-column: 1 / 8;
  }

  .apply-form__files {
    grid-column: 8 / 14;
  }

  .apply-form__submit {
    grid-column: 1 / 13;
  }
}

@media screen and (max-width: 480px) {
  .apply-form__details,
  .apply-form__files,
  .apply-form__submit {
    grid-column: 1 / 14;
  }
}

/* ========== FORM ELEMENTS ========== */
.apply-form__element {
  padding: 1em 0;
  position: relative;
}
.apply-form__element label {
  display: block;
  margin-bottom: 1em;
}
.apply-form__element .count {
  font-size: 0.8em;
  opacity: 0.4;
}

.apply-form input[type="submit"] {
  border: none;
  text-align: left;
}

/* ========== INPUTS ========== */

input.input--lge.input--lge {
  border: none;
  padding-left: 0;
  background: transparent !important;
  font-size: 4em;
  width: 100%;
}

.input--lge::placeholder {
  opacity: 0.5;
}

.apply-form input.form-error,
.apply-form textarea.form-error,
.apply-form select.form-error ~ .select {
  background: rgba(255, 0, 0, 0.2) !important;
}


/* ========== SELECT ========== */

select {
  position: absolute;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.select,
.select__options-wrapper {
  min-width: 8em;
  width: calc(100% + var(--border-thickness) + var(--border-thickness));
  border: var(--border-thickness) solid currentcolor;
}

.select {
  --border-thickness: 1px;
  --select-padding: 0.2em;
  --bg: white;
  --time: 125ms;

  max-width: calc(100% - 1.8em);
  margin-right: 2em;
  color: #333;
  padding: var(--select-padding);
  position: relative;
  display: inline-block;
  transition: background-color var(--time) ease-in-out;
}

.select--active {
  background-color: var(--bg);
}

.select__current {
  cursor: pointer;
  margin-bottom: -2px;
}

.select__option,
.select--empty .select__current {
  color: #aaaaaa;
  display: block;
  white-space: nowrap;
}

.select__caret {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;

  transform: translateX(100%) rotate(0);
  transition: transform var(--time) ease-in-out;

  width: calc(2em + var(--border-thickness) + var(--border-thickness));

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent;
}

.select--active .select__caret {
  transform: translateX(100%) rotate(180deg);
}

.select__options-wrapper {
  position: absolute;
  bottom: 1px;
  left: calc(-1 * var(--border-thickness));
  z-index: 3;

  max-height: 10em;
  overflow-y: scroll;

  transform: translateY(100%) scaleY(0);
  transform-origin: top center;

  border-top: none;

  transition: transform var(--time) ease-in-out;
}

.select--active .select__options-wrapper {
  background-color: var(--bg);
  transform: translateY(100%) scaleY(1);
}

.select__options {
  padding: var(--select-padding);
}

.select__option:hover,
.select__option--active {
  cursor: pointer;
  color: #333333;
}

/* ========== DROP AREA ========== */

.image-drop {
  border: thin solid;
  width: 100%;
  height: calc(((1.2 * 1em) * 6) + 0.6em);
  padding: 0.3em 0.4rem;
  margin-bottom: 0.3em;
}

.image-drop.highlight {
  background-color: white;
}

.image-drop span,
.image-drop + span {
  opacity: 0.5;
}

.image-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.image-previews img {
  max-width: 100%;
  height: auto;
}