.contact-section {
  --label-bg-color: var(--primary-bg-color);
  --label-color: var(--tertiary-text-color);
}

.contact-section .container {
  row-gap: 2rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  border: var(--border-secondary);
  padding: 2rem;

  @media (width >= 56.25rem) {
    grid-column: 1 / 11;
  }
}

.form:is(.success, .error) .form-message {
  display: flex;
}

.form:is(.success, .error) > *:not(.form-message, .form-title) {
  display: none;
}

.form-message {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  text-align: center;
  margin-block: auto;
}

.form.success .form-message:before {
  mask-image: url('../../assets/icons/check.svg');
  display: block;
}

.form.error .form-message:before {
  mask-image: url('../../assets/icons/close.svg');
  display: block;
}

.form-title {
  text-align: left;
}

.form-label {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  position: relative;
  min-width: 0;
  width: 100%;

  &:has(:required) > span::after {
    content: ' *';
  }
}

.form[aria-busy="true"] :is(.form-label, .button[type="submit"], .required-text) {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.5s;
}

.form-label-text {
  position: absolute;
  background-color: var(--label-bg-color);
  color: var(--label-color);
  padding-inline: 0.25rem;
  left: 0.5rem;
  top: -0.75rem;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-label input,
.form-label textarea {
  padding: 0.75rem;
  border: var(--border-secondary);
}

.form-label textarea {
  resize: vertical;
  field-sizing: content;
  min-height: 3lh;
  box-sizing: content-box;

  &::placeholder {
    opacity: 0.7;
  }
}

.form .button[type="submit"] {
  width: 100%;
}

.antispam-instruction {
  font-weight: var(--font-weight-semibold);
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  @media (width >= 56.25rem) {
    grid-column: 12 / -1;
  }
}

.contact-link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border: var(--border-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25rem;
  transition: text-decoration-color 0.3s;

  &:before {
    display: block;
    mask-image: var(--icon);
  }

  &:hover {
    text-decoration-color: currentColor;
  }
}

.antispam-instruction {
  font-weight: var(--font-weight-semibold);
}