/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/

@use "@carbon/react/scss/motion";
@use "../../global/config" as *;
@use "../../global/utils";
@use "../../global/themes/shell-tokens" as shell;
@use '@carbon/themes/scss/tokens' as theme;

// Necessary for the Boomerang theme to work
:root {
  .#{$prefix}--header {
    background: shell.$bmrg-theme-background !important;
    border-block-end-color: shell.$bmrg-theme-border;

    .#{$prefix}--header__name {
      color: shell.$bmrg-theme-primary;
      &:focus {
        border-color: var(--cds-border-interactive);
      }
    }

    .#{$prefix}--header__action {
      border-radius: 0 !important;

      svg,
      path {
        fill: shell.$bmrg-theme-primary !important;
      }

      &:focus {
        box-shadow: none;
      }
    }

    // Background overrides
    .#{$prefix}--header__global {
      .#{$prefix}--modal-close {
        svg {
          path {
            fill: shell.$bmrg-theme-primary !important;
          }
        }
      }
    }
    .#{$prefix}--side-nav,
    .#{$prefix}--header-panel {
      background: shell.$bmrg-theme-background !important;
    }

    .#{$prefix}--header__action[aria-expanded="true"] {
      background-color: shell.$bmrg-theme-active-icon;
    }

    .#{$prefix}--header__menu-item--current::after {
      background-color: shell.$bmrg-accent;
    }

    // Global action buttion
    .#{$prefix}--header__action--active {
      background-color: shell.$bmrg-theme-active;
    }

    // Side nav overrides
    .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu[aria-expanded="false"]::before {
      background-color: shell.$bmrg-accent;
    }

    .#{$prefix}--header__nav::before {
      background-color: shell.$bmrg-theme-border;
    }

    .#{$prefix}--side-nav__link--current::before {
      background-color: shell.$bmrg-accent;
    }
    .#{$prefix}--bmrg-header-drop-down {
      background: shell.$bmrg-theme-background;
      border-top: shell.$bmrg-theme-menu-border;

      a.#{$prefix}--header__menu-item {
        color: shell.$bmrg-theme-primary !important;
        background-color: shell.$bmrg-theme-menu-background !important;
        &:hover {
          color: shell.$bmrg-theme-primary !important;
          background-color: shell.$bmrg-theme-menu-hover !important;
        }
        span {
          color: shell.$bmrg-theme-primary !important;
          svg,
          path {
            fill: shell.$bmrg-theme-primary !important;
          }
        }
      }
    }

    .#{$prefix}--bmrg-header-notifications-badge__icon-container {
      position: relative;
      display: flex;
    }

    .#{$prefix}--bmrg-header-notifications-badge__icon-badge {
      position: absolute;
      top: -1px;
      right: -8px;
      background-color: theme.$support-error-inverse;
      color: theme.$text-on-color;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10px;
    }
    .#{$prefix}--bmrg-header-instance-switcher .cds--bmrg-header-drop-down a.cds--header__menu-item {
      padding: 10px 15px !important;
      border-bottom: 1px solid lightgrey !important;
    }

    .instance-checkmark-style-container {
      display: flex;
      justify-content: space-between;
      width: 13rem;
    }
    // span, p, a, div {
    //   color: shell.$bmrg-theme-primary;
    //   &:hover {
    //     color: shell.$bmrg-theme-primary !important;
    //   }
    // }
  }
}

.#{$prefix}--side-nav__item {
  a.#{$prefix}--header__menu-item {
    color: shell.$bmrg-theme-primary !important;
    // background-color: shell.$bmrg-theme-background;
    &:hover {
      color: shell.$bmrg-theme-primary !important;
    }
  }
}

a.#{$prefix}--header__menu-item {
  color: shell.$bmrg-theme-primary !important;
  background-color: shell.$bmrg-theme-background !important;
  &:hover {
    color: shell.$bmrg-theme-primary !important;
    background-color: shell.$bmrg-theme-active !important;
  }
}
a.#{$prefix}--side-nav__link {
  color: shell.$bmrg-theme-secondary;
  &--current {
    span,
    p {
      color: shell.$bmrg-theme-primary;
    }
  }
  &:hover {
    .#{$prefix}--side-nav__link-text {
      color: shell.$bmrg-theme-primary;
    }
    span,
    p {
      color: shell.$bmrg-theme-primary;
    }
  }
  .#{$prefix}--side-nav__link-text {
    color: shell.$bmrg-theme-secondary;
  }
  svg {
    fill: shell.$bmrg-theme-primary;
  }
}