/*
 * Header User Menu component
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/' as *;

pkt-header-user-menu {
  display: block;
}

// User Menu specific styles
.pkt-header-service__user-menu {
  &::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%);
  }
}
.pkt-user-menu,
.pkt-header-service__slot-menu {
  background-color: var(--pkt-color-background-default);
  border: 2px solid var(--pkt-color-border-subtle);
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  .pkt-header-service {
    &__slot-list {
      margin: map.get(variables.$spacing, 'size-32');
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: map.get(variables.$spacing, 'size-32');
      padding: 0;
    }
  }

  &__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__sublist {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: map.get(variables.$spacing, 'size-24');
  }

  &__item {
    display: block;
    padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-32');

    &:nth-child(odd) {
      background-color: var(--pkt-color-surface-default-default);
    }
  }

  &__subitem {
    display: block;

    &:nth-child(odd) {
      background-color: transparent;
    }
  }

  &__label {
    @include get-text('pkt-txt-14-medium');
    color: var(--pkt-color-text-placeholder);
    margin-block-end: map.get(variables.$spacing, 'size-8');
  }

  &__name {
    @include get-text('pkt-txt-18-medium');
  }

  &__description {
    @include get-text('pkt-txt-16-light');
  }

  &__action {
    margin-block-start: map.get(variables.$spacing, 'size-16');
  }

  &__button {
    font-weight: normal;

    &:hover {
      background-color: none;
    }
  }

  &__link {
    @include get-text('pkt-txt-18-light');
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.2s ease;

    .pkt-link span {
      align-self: anchor-center;
    }

    .pkt-link__icon {
      margin-inline-end: map.get(variables.$spacing, 'size-8');
      align-self: baseline;
    }
  }
}