//@import '../theme/core/spacing/vars';
@import '../../../../../../grid-deprecated/vars';

@import '../../../mixins/focus-state';

:host {
  display: block;

  .component {
    ::slotted(a),
    ::slotted(button) {
      all: unset;
      box-sizing: border-box;
      height: 68px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 22px;
      border: none;
      background-color: var(--tds-sidebar-side-menu-background-cover);
      font: var(--tds-headline-07);
      letter-spacing: var(--tds-headline-07-ls);
      color: var(--tds-sidebar-side-menu-single-item-color);
      cursor: pointer;
    }

    ::slotted(tds-side-menu-user),
    &-has-user ::slotted(button) {
      all: unset;
      box-sizing: border-box;
      height: 68px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 22px 0 16px;
      border: none;
      background-color: var(--tds-sidebar-side-menu-background-cover);
      font: var(--tds-headline-07);
      letter-spacing: var(--tds-headline-07-ls);
      color: var(--tds-sidebar-side-menu-single-item-color);
      cursor: pointer;
    }

    tds-icon {
      color: red !important;
    }

    ::slotted(a:focus-visible),
    ::slotted(button:focus-visible) {
      @include tds-focus-state;
    }

    &:hover {
      ::slotted(a),
      ::slotted(button) {
        background-color: var(--tds-sidebar-item-state-hover);
      }
    }

    &:active {
      ::slotted(a),
      ::slotted(button) {
        background-color: var(--tds-sidemenu-item-state-active);
      }
    }

    &-collapsed {
      ::slotted(a),
      ::slotted(button) {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
    }

    &-selected:not(&-active) {
      ::slotted(a),
      ::slotted(button),
      ::slotted(tds-side-menu-user) {
        position: relative;
        background-color: var(--tds-sidebar-item-state-selected);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
        }
      }
    }
  }
}

@media (min-width: $grid-lg) {
  :host {
    .component.component-collapsed {
      ::slotted(a),
      ::slotted(button) {
        color: rgb(90 90 90 / 0%);
        overflow: hidden;
      }
    }
  }
}