@use '../abstracts/functions';
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/mixins/' as *;
@use 'header-shared' as shared;

.pkt-header-service.pkt-header-service--mobile {
  grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
  grid-template-columns: 1fr auto;

  @include bp('laptop-up') {
    grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
  }

  // Full-width user bar + in-flow user menu (shared with the global header).
  @include shared.header-mobile-user-bar('pkt-header-service');

  .pkt-header-service {
    &--compact {
      grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
    }

    &__logo-area,
    &__content,
    &__user {
      column-gap: map.get(variables.$spacing, 'size-8');
    }

    &__logo-area {
      grid-column: 1;
      grid-row: 1;
    }

    &__content {
      grid-column: 2;
      grid-row: 1;
      padding-inline-end: map.get(variables.$spacing, 'size-8');
    }

    &__user {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: stretch;
      padding: 0;
    }

    &__logo {
      svg {
        height: map.get(variables.$spacing, 'size-32');
      }
    }

    &__service-name {
      @include get-text('pkt-txt-16-medium');
    }

    &__mobile-menu {
      background-color: var(--pkt-color-background-default);
    }

    &__slot-content {
      display: none;
    }

    &__slot-container.is-open {
      .pkt-header-service__slot-content {
        position: absolute;
        top: map.get(variables.$spacing, 'size-64');
        left: 0;
        right: 0;
        max-width: 100vw;

        @include bp('laptop-up') {
          top: map.get(variables.$spacing, 'size-72');
        }
      }
    }

    &__search-container {
      &.is-open {
        .pkt-header-service__mobile-menu {
          position: absolute;
          top: map.get(variables.$spacing, 'size-64');
          left: 0;
          right: 0;

          @include bp('laptop-up') {
            top: map.get(variables.$spacing, 'size-72');
          }
        }
      }
    }

    &__search-input {
      padding: 1rem;
    }
  }
}

.pkt-header-service.pkt-header-service--mobile,
.pkt-header-service.pkt-header-service--tablet {
  .pkt-header-service {
    &__slot-container.is-open .pkt-header-service__slot-content,
    &__search-container.is-open .pkt-header-service__mobile-menu,
    &__mobile-menu.is-open {
      background-color: var(--pkt-color-background-default);
      z-index: 100;
      border-top: 1px solid #{functions.color-token('border-subtle')};
      border-bottom: 1px solid #{functions.color-token('border-subtle')};

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.25rem;
        pointer-events: none;
        background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));
        transform: translateY(100%);
        z-index: 101;
      }
    }

    &__slot-container.is-open .pkt-header-service__slot-content {
      height: max-content;
      max-height: calc(100dvh - var(--pkt-header-height));
      overflow: visible;

      &,
      & > .pkt-contents {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        &,
        > ul {
          margin-inline-start: 0;
          gap: map.get(variables.$spacing, 'size-24');
          > * {
            margin-inline-start: 0;
          }
        }
      }
      .pkt-contents {
        padding: 2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
  }
}

.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) {
  .pkt-header-service {
    &__slot-content {
      display: none;
    }

    &__slot-container,
    &__search-container {
      position: relative;

      &.is-open {
        .pkt-header-service__slot-content,
        .pkt-header-service__mobile-menu {
          display: block;
          position: absolute;
          top: 100%;
          left: 0;
          min-width: 19rem;
          width: fit-content;
          max-width: 100%;
          right: auto;
          border: 2px solid var(--pkt-color-border-subtle);

          &.align-right {
            left: auto;
            right: 0;
          }
        }
      }
    }

    &__search-input {
      padding: 1rem;
    }
  }
}