.ic-contact-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;

  @media screen and (min-width: 767px) {
    gap: 4rem;
  }

  .mode-toggle {
    align-self: center;
    padding: 6px;
    background-color: var(--wp--preset--color--base-dark);

    .toggle-checkbox {
      display: none;
    }

    .toggle-container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: fit-content;
      color: var(--wp--preset--color--base-light);
      font-size: var(--wp--preset--font-size--small);
      cursor: pointer;
      overflow: hidden;

      @media screen and (min-width: 767px) {
        font-size: var(--wp--preset--font-size--medium);
      }
    }

    .toggle-container::before {
      content: "";
      position: absolute;
      width: 50%;
      height: 100%;
      left: 0%;
      background: var(--wp--preset--color--primary);
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .toggle-container div {
      padding: 1rem 2rem;
      text-align: center;
      z-index: 1;
    }

    .toggle-checkbox:checked + .toggle-container::before {
      left: 50%;
    }
  }

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

    h2 {
      margin: 0;
      text-align: center;
    }

    .message-div {
      display: none;
      border: 6px solid green;
      padding: 1rem 2rem;
      margin-bottom: 2rem;

      p {
        font-family: "Guton";
        margin: 0;
      }
    }

    .error-div {
      border: 6px solid red;
    }

    input,
    textarea {
      font-family: "Guton";
      font-size: var(--wp--preset--font-size--small);
      padding: 0.5rem 1.5rem;
      border: 6px solid var(--wp--preset--color--base-dark);
      box-shadow: 0.75rem 0.75rem 0 0 var(--wp--preset--color--base-dark);
      transition: box-shadow 0.1s ease-in-out;
    }

    input:hover,
    textarea:hover {
      box-shadow: 0 0 0 0 var(--wp--preset--color--base-dark);
    }

    textarea {
      height: 10rem;

      @media screen and (min-width: 767px) {
        height: 15rem;
      }
    }

    .form-controls-general {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-bottom: 5rem;

      @media screen and (min-width: 767px) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .legal-notice {
      font-size: var(--wp--preset--font-size--x-small);
      margin: 0;
    }

    .submit-button {
      display: flex;
      flex-direction: row;
      align-self: center;
      background: none;
      border: none;
      height: 48px;
      font-family: "Guton";
      font-size: 1.5rem;
      font-weight: 400;
      margin: 2rem 0.75rem 0.75rem 0px !important;
      padding: 0;
      box-shadow: 0.75rem 0.75rem 0 0 var(--wp--preset--color--base-dark);
      transition: box-shadow 0.1s ease-in-out;
      cursor: pointer;

      .label-div {
        display: flex;
        align-items: center;
        padding: 0.7rem 2rem;
        background-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base-light);
        transition: background-color 0.1s ease-in-out;
      }

      .icon-div {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1;
        overflow: hidden;
        max-height: 100%;
        position: relative;
        background-color: #ffffff;
        transition: background-color 0.25s ease-in-out;
      }

      .icon-div i {
        color: var(--wp--preset--color--primary);
        font-size: 60px;
        transition:
          transform 0.15s cubic-bezier(0.77, -0.8, 0.24, 1.77),
          font-size 0.15s cubic-bezier(0.86, 0, 0.07, 1),
          color 0.25s ease-in-out;
      }

      @media screen and (min-width: 767px) {
        height: 4.3rem;
        font-size: 1.8rem;

        .label-div {
          padding: 1.25rem 3.75rem;
        }

        .icon-div i {
          font-size: 5.6rem;
        }
      }
    }

    .submit-button:hover {
      box-shadow: 0 0 0 0 var(--wp--preset--color--base-dark);
    }

    .submit-button:hover > .label-div {
      background-color: var(--wp--preset--color--primary-hover);
    }

    .submit-button:hover > .icon-div {
      background-color: var(--wp--preset--color--primary);
    }

    .submit-button:hover > .icon-div i {
      color: var(--wp--preset--color--base-dark);
      transform: rotate(-45deg);
      font-size: 105px;

      @media screen and (min-width: 767px) {
        font-size: 9.3rem;
      }
    }
  }
}