@layer reset, fonts, tokens, base, layout, components, utilities;

@import url('./reset.css') layer(reset);
@import url('./fonts.css') layer(fonts);
@import url('./tokens.css') layer(tokens);

@layer base {

  body {
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    font-family: var(--ff-base);
    font-size: 1rem;
    color: var(--clr-purple-950);
    background-color: var(--clr-gray-50);
    overflow: clip;

    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      inline-size: 31.875rem;
      block-size: 63.625rem;
      background: var(--gradient-primary);
      border-radius: 99rem;
    }

    &::before {
      top: 50%;
      left: 50%;
      translate: -100% -92%;
    }

    &::after {
      opacity: .05;
      top: 0;
      left: 50%;
      translate: 0 41%;
      z-index: -1;
    }

    @media (width >=48rem) {
      &::before {
        translate: -100% -96%;
      }

      &::after {
        translate: 0 40%;
      }
    }

    @media (width >=64rem) {
      &::before {
        translate: -158% -71%;
      }

      &::after {
        translate: 77% 20%;
      }
    }
  }

  :focus-visible {
    outline-color: currentColor;
  }
}

@layer layout {

  .booking-preview {
    --max-width: 27.8125rem;

    inline-size: min(100% - var(--space-800), var(--max-width));
    margin-top: 3.3125rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-800);

    @media (width >=64rem) {
      --max-width: 50.6875rem;

      flex-direction: row-reverse;
      gap: var(--space-1500);

      .intro {
        text-align: left;
      }
    }
  }

  .intro {
    text-align: center;

    h1 {
      margin-block-end: var(--space-300);
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.2;
    }

    p {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.75;
      color: var(--clr-gray-500);
    }
  }
}

@layer components {

  .phone {
    flex-shrink: 0;
    inline-size: 15.4375rem;
    padding: 0.6875rem 0.5938rem;
    background-color: var(--clr-white-50);
    border-radius: 1.875rem;
    box-shadow: 0 1.875rem 3.75rem -0.625rem color-mix(in srgb, var(--clr-purple-950) 25%, transparent);

    position: relative;

    &::before {
      content: '';
      position: absolute;
      inline-size: 8.0625rem;
      block-size: 1.8125rem;
      background-color: var(--clr-white-0);
      border-radius: 0 0 0.875rem 0.875rem;
      inset-inline-start: 0;
      inset-block-start: 0;
      translate: 50% 0;
      z-index: 10;
    }
  }

  .phone__screen {
    padding: 4.8125rem 0.5rem 0.5rem;
    background-color: var(--clr-gray-100);
    border: 1px solid var(--clr-purple-50);
    border-radius: 1.25rem;

    position: relative;
  }

  .phone__header {
    inset-inline: 0;
    padding: 1.63rem 1rem 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-100);
    color: var(--clr-white-0);
    background: var(--gradient-primary);
    border-radius: 1.25rem 1.25rem 0.375rem 0.375rem;

    position: absolute;
    top: 0;
    left: 0;

    img:last-child {
      margin-left: auto;
    }
  }

  .phone__user {
    display: flex;
    align-items: center;
    gap: var(--space-100);

    img {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      border-radius: 50%;
      border: 0.0625rem solid var(--clr-white-0);
    }
  }

  .phone__user-info {
    line-height: 1.2;

    .phone__user-name {
      font-size: 0.6875rem;
      font-weight: 500;
    }

    .phone__user-status {
      font-size: 0.5rem;
      color: var(--clr-purple-300);
    }
  }

  .conversation {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-100);
  }

  .conversation__message {
    padding: var(--space-100);
    font-size: 0.5rem;
    line-height: 1.2;
  }

  .conversation__message--received {
    max-inline-size: 8rem;
    color: var(--clr-purple-600);
    background-color: var(--clr-purple-50);
    border-radius: 0.625rem 0.625rem 0.625rem 0.25rem;
  }

  .conversation__message--sent {
    justify-self: end;
    max-inline-size: 8.5rem;
    color: var(--clr-gray-500);
    background-color: var(--clr-white-0);
    border-radius: 0.625rem 0.625rem 0.25rem 0.625rem;
    box-shadow: 0 0.625rem 0.3125rem -0.3125rem color-mix(in srgb, var(--clr-purple-950) 4.5%, transparent);
  }

  .conversation__message--option {
    max-inline-size: 9.4375rem;
    display: flex;
    align-items: center;
    gap: var(--space-100);
    background: var(--gradient-primary);
    color: var(--clr-white-0);
    border-radius: 0.625rem 0.625rem 0.625rem 0.25rem;
    box-shadow: 0 0.625rem 0.3125rem -0.3125rem color-mix(in srgb, var(--clr-purple-950) 4.5%, transparent);

    span {
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border: 0.0625rem solid var(--clr-pink-400);
      border-radius: 50%;
    }

    strong {
      font-size: 0.75rem;
      font-weight: 700;
      margin-inline-start: auto;
    }
  }

  .conversation__message--gallery {
    justify-self: end;
  }

  .gallery {
    display: flex;
    align-items: center;
    gap: var(--space-100);

    img {
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: 0.625rem;
    }
  }

  .message-input {
    margin-block-start: var(--space-200);
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.5rem;
    line-height: 1.2;
    background-color: var(--clr-white-0);
    border-radius: 99rem;

    span:first-of-type {
      flex-grow: 1;
      padding-inline-start: 0.5rem;
      line-height: 2.4;
      border-top-left-radius: 99rem;
      border-bottom-left-radius: 99rem;
    }

    span:last-of-type {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      margin-inline-start: auto;
      padding: var(--space-0);
      padding-inline-start: 0.25rem;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background-color: var(--clr-purple-950);
    }
  }

  .conversation__message--received+.conversation__message--gallery {
    margin-block-start: var(--space-100);
  }

  .conversation__message--sent+.conversation__message--received {
    margin-block-start: var(--space-100);
  }

  /* ATTRIBUTION */
  .attribution {
    padding-block: var(--space-200);
    font-size: 0.875rem;

    a {
      margin-inline: .5em;
      border-radius: .15em;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inline-size: 100%;
        block-size: 0.125rem;
        inset-inline-start: 0;
        inset-block-end: -0.125rem;
        background-color: currentColor;
        transform: scaleX(1);
        transition: transform .25s ease-out;
        pointer-events: none;
      }

      &:is(:hover, :focus-visible)::after {
        transform: scale(0);
      }
    }
  }
}

@layer utilities {

  .visually-hidden {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}