@use "../../variables/index" as *;

@use "../mixins/shadows-helper";

/**
 * Right Drawer - Fixed side panel navigation
 *
 * Note: Uses design tokens for spacing ($size-*, $component-padding), colors ($drawer-*).
 *
 * Intentionally hardcoded values:
 * - 6px padding: Off-grid fine-tuning
 * - 2px/-2px outline: Focus indicator width and offset
 * - Z-index values: Stacking order
 * - Percentages: Transform values
 */

@mixin checkwhiteicon($icon) {
  @if $icon == 'white' {
    &:before {
      color: $icon-white-color-dark;
    }

    &::after {
      color: $icon-white-color-light;
    }
  }
}

@mixin checkdarkicon($icon) {
  @if $icon == 'duo' {
    &:before {
      color: $icon-dark-color-dark;
    }

    &:after {
      color: $icon-dark-color-light;
    }
  }
}

.c8y-right-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: $drawer-bg;
  color: $drawer-color;
  overflow-y: auto;
  padding: 0;
  z-index: $zindex-navbar-fixed + 1;
  display: flex;
  flex-direction: column;
  transform: translate(100%, 0);
  transition: transform $open-menu-time-type;
  --sticky-top-margin: $size-80;

  --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));

  --c8y-form-label-color: #{$drawer-color};

  --c8y-component-border-color: var(--right-drawer-separator-color, var(--c8y-right-drawer-separator-color, var(--navigator-separator-color, var(--c8y-root-component-border-color))));

  --link-color: var(--right-drawer-link-color, var(--c8y-right-drawer-link-color, var(--c8y-right-drawer-link-color-default, var(--c8y-root-component-color-link))));

  --c8y-component-color-link-hover: var(--right-drawer-link-color-hover, var(--c8y-right-drawer-link-color-hover, var(--c8y-root-component-color-link-hover)));

  @media (min-width: $screen-sm-min) {
    width: $navigatorWidth;
    transform: translate($navigatorWidth, 0);
  }
  .drawerOpen & {
    transform: translate(0, 0);
    @include shadows-helper.boxShadowHelper(md, right);
  }

  .legend, .text-muted {
    color: $drawer-legend;
  }
  .sticky-top {
    top: var(--sticky-top-margin);
    background-color: $drawer-bg !important;
  }
  &__header {
    padding: $component-padding;
    padding-top: $size-24;
    position: sticky;
    top: 0;
    z-index: 11;
    flex-shrink: 0;
    background-color: inherit;
    .user-dot {
      margin-right: $size-base;
    }

    .close {
      margin-top: calc($size-16 * -1);
      text-shadow: none;
      color: $drawer-color;
      font-weight: lighter;
      font-size: $size-20;

      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  .c8y-right-drawer__link,
  .c8y-right-drawer__item {
    display: flex;
    align-items: center;
    width: 100%;
    color: inherit;
    text-align: left;
    padding: 6px $component-padding;
    background-image: none;
    background-color: transparent;
    border: 0;
    &.sticky-top {
      background-color: inherit;
    }
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'],
    .c8y-icon {
      font-size: $size-20;
      margin: $size-4 $size-8 $size-4 0;
    }
  }

  .c8y-right-drawer__link {
    &:active {
      background-color: $drawer-background-active;
    }

    &:hover,
    &:focus {
      text-decoration: none;
      outline: 2px solid $drawer-border-selected;
      outline-offset: -2px;
      color: $drawer-color;
      [class^='dlt-c8y-icon-'],
      [class*=' dlt-c8y-icon-'],
      .c8y-icon {
        color: $drawer-border-selected;
      }
    }
  }
}