@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../button/button.scss" as *;
@use "../list-item/list-item.scss" as *;

:root {
  --ds-buddy-menu-bottom-margin: 100px;
  --ds-buddy-menu-position-top: 0;
  --ds-buddy-menu-position-right: 0;
}

.ds-buddy-menu {
  position: absolute;
  top: var(--ds-buddy-menu-position-top);
  right: var(--ds-buddy-menu-position-right);

  &,
  .ds-buddy-menu__inner {
    width: 360px;

    @include ds-mq-largest-breakpoint(mobile) {
      width: 100vw;
    }
  }

  .ds-buddy-menu__inner {
    background-color: $ds-color-surface-primary-elevated;
    border-radius: ds-border-radius(025);
    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-sm);
    position: relative;
    z-index: 1;
  }

  .ds-buddy-menu__scrollable-container {
    max-height: calc(100vh - var(--ds-buddy-menu-bottom-margin));
    overflow-y: auto;
  }
  .ds-buddy-menu__content {
    position: relative;
  }
  .ds-buddy-menu__header {
    padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
    margin: ds-spacing(0 0 $ds-s-100);
  }
  .ds-buddy-menu__close {
    position: absolute;
    right: ds-spacing($ds-s-075);
    top: ds-spacing($ds-s-075);
  }
  .ds-buddy-menu__greeting {
    margin: ds-spacing(0 0 $ds-s-100);
    display: block;
    @include ds-typography($ds-typography-functional-heading-sm) {
      color: $ds-color-text-primary;
    }
  }
  .ds-buddy-menu__account-title,
  .ds-buddy-menu__addons-title,
  .ds-buddy-menu__links-title {
    margin: ds-spacing(0 0 $ds-s-025);
    @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold) {
      color: $ds-color-text-primary;
    }
  }
  .ds-buddy-menu__links-title {
    padding: ds-spacing(0 $ds-s-100);
  }
  .ds-buddy-menu__addons-list {
    padding: 0;
    list-style: none;
    margin: ds-spacing(0 0 $ds-s-100);
    a {
      @include ds-link($ds-link-list);
      @include ds-typography($ds-typography-functional-body-md) {
        color: $ds-color-text-primary-subtle;
      }
    }
  }
  .ds-buddy-menu__account-level {
    margin: ds-spacing(0 0 $ds-s-100);
    display: block;
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary-subtle;
    }
  }
  .ds-buddy-menu__links-list {
    border-bottom-left-radius: ds-border-radius(025);
    border-bottom-right-radius: ds-border-radius(025);
    overflow: hidden;
    margin: 0;
    padding: ds-spacing(0 $ds-s-100);
  }

  &.ds-force-px {
    .ds-buddy-menu__greeting {
      @include ds-typography($ds-typography-functional-heading-sm, true);
    }
    .ds-buddy-menu__account-title,
    .ds-buddy-menu__addons-title,
    .ds-buddy-menu__links-title {
      @include ds-typography($ds-typography-functional-body-md, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
    }
    .ds-buddy-menu__addons-list a {
      @include ds-typography($ds-typography-functional-body-md, true);
    }
    .ds-buddy-menu__account-level {
      @include ds-typography($ds-typography-functional-body-md, true);
    }
  }

  &.ds-buddy-menu--skola {
    .ds-buddy-menu__greeting {
      margin: 0;
    }
  }
}