/* Prevent flash before Alpine.js initialises */
@layer master {
  [x-cloak] .vacancySearch,
  .vacancySearch[x-cloak] {
    display: none !important;
  }

  .vacancySearch {
    display: flex !important;
    legend,
    .disclaimer {
      font-size: var(--xs-fontsize);
    }
    .disclaimer {
      color: var(--form-placeholder);
    }
    form {
      border-radius: var(--border-radius);
      border: 2px solid var(--color-dark);
      padding: 8px 10px;
      display: flex;
      align-items: center;
      .ai {
        color: var(--form-placeholder);
        margin-left: var(--form-input-size);
      }
    }
    .searchField {
      flex: 1;
    }
    input {
      width: 100%;
      background: none;
      border: 0;
      outline: none;
      color: var(--color-dark);
      &::placeholder {
        white-space: pre-line;
      }
    }
    button {
        width: 56px;
        height: 56px;
        border-radius: 100%;
        background: var(--color2);
        color: var(--color-dark);

        justify-content: center;
        align-items: center;
        display: flex;
        transition: var(--transition);
        svg {width: 16px;}
        &:hover:not(:disabled) {
            opacity: 0.8;
        }
        &:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        &[type="reset"] {
          background: transparent;
        }
      }
  }

  .searchField {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }

  /* Hide placeholder when examples are in the DOM; show it only as a fallback */
  .searchField:has(.vacancySearch__example) input::placeholder {
    opacity: 0;
  }

  /* Hide spans instantly when the input has a value */
  .searchField input:not(:placeholder-shown) ~ .vacancySearch__example {
    opacity: 0;
    animation: none;
  }

  .vacancySearch__example {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: var(--form-input-size);
    color: var(--form-placeholder);
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    animation: example-cycle 20s infinite;

    &:nth-of-type(1) { animation-delay: 0s; }
    &:nth-of-type(2) { animation-delay: 4s; }
    &:nth-of-type(3) { animation-delay: 8s; }
    &:nth-of-type(4) { animation-delay: 12s; }
    &:nth-of-type(5) { animation-delay: 16s; }
  }

  @keyframes example-cycle {
    0%           { opacity: 0; }
    7.5%, 20%    { opacity: 1; }
    27.5%, 100%  { opacity: 0; }
  }

  .vacancySearch button[aria-busy="true"] {
    animation: vs-pulse 1s ease-in-out infinite;
  }

  @keyframes vs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}