/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

//
// SIDE-NAV > HEADER
//

@use "../../mixins/interactive-dark-theme" as *;

// HEADER (LAYOUT WRAPPER)

.hds-side-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// LOGO

.hds-side-nav-header__logo-container {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--token-side-nav-header-home-link-logo-size);
  height: var(--token-side-nav-header-home-link-logo-size);
  transition:
    width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing),
    height var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);

  .hds-side-nav--is-minimized & {
    width: var(--token-side-nav-header-home-link-logo-size-minimized);
    height: var(--token-side-nav-header-home-link-logo-size-minimized);
  }
}

// "home-link"

.hds-side-nav__home-link {
  @include hds-interactive-dark-theme($add-visible-border: false, $is-within-side-nav: true);
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(
    var(--token-side-nav-header-home-link-padding) - 1px
  ); // by design -  we take in account the transparent border

  // disabled state:
  &:disabled,
  &[disabled],
  &.mock-disabled,
  &:disabled:focus,
  &[disabled]:focus,
  &.mock-disabled:focus,
  &:disabled:hover,
  &[disabled]:hover,
  &.mock-disabled:hover {
    @include hds-interactive-dark-theme-state-disabled();
  }
}

// ACTIONS

.hds-side-nav-header__actions-container {
  display: flex;
  gap: var(--token-side-nav-header-actions-spacing);
}

// Dropdown & Button color theming overrides
.hds-side-nav__dropdown, // deprecated classname
.hds-side-nav,
.hds-side-nav-header {
  .hds-button,
  .hds-dropdown-toggle-button,
  .hds-dropdown-toggle-icon {
    // Apply dark theme to child interactive components not within a nested dropdown
    &:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
      @include hds-interactive-dark-theme();

      // disabled state:
      &:disabled,
      &[disabled],
      &.mock-disabled,
      &:disabled:focus,
      &[disabled]:focus,
      &.mock-disabled:focus,
      &:disabled:hover,
      &[disabled]:hover,
      &.mock-disabled:hover {
        @include hds-interactive-dark-theme-state-disabled();
      }
    }
  }
}

// generic "icon-button"

// TODO: Replace this component with Hds::Button
.hds-side-nav__icon-button {
  @include hds-interactive-dark-theme();
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; // same height as the dropdown "toggle"
  height: 36px;
  padding: 5px; // we take in account the transparent border

  // disabled state:
  &:disabled,
  &[disabled],
  &.mock-disabled,
  &:disabled:focus,
  &[disabled]:focus,
  &.mock-disabled:focus,
  &:disabled:hover,
  &[disabled]:hover,
  &.mock-disabled:hover {
    @include hds-interactive-dark-theme-state-disabled();
  }
}