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


/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

// Defaults
$use-theme-boomerang: false !default;
$use-theme-advantage-white: false !default;

// ====================//
// Imports and Exports //
// ====================//
@use "sass:map";
@use '@carbon/styles/scss/theme' as theme;
@use '@carbon/react/scss/components/button/tokens' as button-tokens;
@use 'config' as *;

@use "./themes/default" as theme-default;
@use "./themes/boomerang" as theme-boomerang;
@use "./themes/shell-tokens" as shell;
@use "./utils";

// Import local styles for custom components
@use '../components/AboutPlatform/aboutPlatform';
@use '../components/AdvantageSideNav/advantageSideNav';
@use '../components/AutoSuggest/autoSuggest';
@use '../components/Avatar/avatar';
@use '../components/CheckboxList/checkboxList';
@use '../components/ComboBox/combobox';
@use '../components/ComboBoxMultiSelect/comboBoxMultiSelect';
@use '../components/ConfirmModal/confirmModal';
@use '../components/Creatable/creatable';
@use '../components/DateInput/dateInput';
@use '../components/Feedback/feedback';
@use '../components/DecisionButtons/decisionButtons';
@use '../components/DynamicFormik/dynamicFormik';
@use '../components/ErrorMessage/errorMessage';
@use '../components/ErrorBoundary/errorBoundary';
@use '../components/ErrorDragon/errorDragon';
@use '../components/ErrorPage/errorPage';
@use '../components/ErrorPageCore/errorPageCore';
@use '../components/FeatureHeader/featureHeader';
@use '../components/FeatureNavTab/featureNavTab';
@use '../components/FeatureSideNav/featureSideNav';
@use '../components/FeatureSideNavLink/featureSideNavLink';
@use '../components/PrivacyRedirect/privacyRedirect';
@use '../components/Header/header';
@use '../components/Header/headerAppSwitcher';
@use '../components/Header/headerMenu';
@use '../components/Header/headerMenuItem';
@use '../components/Header/userRequests';
@use '../components/ImageModal/imageModal';
@use '../components/MemberBar/memberBar';
@use '../components/Modal/modal' as addons-modal;
@use '../components/ModalConfirmEdit/modalConfirmEdit';
@use '../components/Notifications/notifications';
@use '../components/PlatformBanner/platformBanner';
@use '../components/PlatformNotifications/platformNotifications';
@use '../components/PrivacyStatement/privacyStatement';
@use '../components/ProfileSettings/profileSettings';
@use '../components/ProtectedRoute/protectedRoute';
@use '../components/RadioGroup/radioGroup';
@use '../components/SignOut/signOut';
@use '../components/SupportCenter/supportCenter';
@use '../components/RichTextArea/richTextArea';
@use '../components/TextArea/textArea';
@use '../components/TextInput/textInput';
@use '../components/Toggle/toggle' as addons-toggle;
@use '../components/TooltipHover/tooltip' as addons-tooltip;


// css for external libs
@use "./tippy";

// UIShell tokens, create css properties for them by default
:root {
  @if ($use-theme-advantage-white) {
    @include utils.create-properties(theme-default.$shell-white-tokens);
  } @else {
    @include utils.create-properties(theme-default.$shell-tokens);
  }
}

.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) {
  >.#{$prefix}--side-nav__link:hover {
    >span {
      color: shell.$bmrg-theme-primary;
    }
  }
}

//style for advantage sidenav
.#{$prefix}--side-nav__icon {
  svg {
    fill: shell.$bmrg-theme-primary;
  }
} 

.#{$prefix}--side-nav__item--active {
  .#{$prefix}--side-nav__icon {
    svg {
      fill: shell.$bmrg-theme-primary;
    }
  }
}


.#{$prefix}--side-nav__submenu, .#{$prefix}--header__action {
  &:focus {
    border-color: shell.$bmrg-accent;
    outline: shell.$bmrg-accent 0.0625rem solid !important;
  }
}

.#{$prefix}--skip-to-content {
  background-color: shell.$bmrg-theme-background !important;
  color: shell.$bmrg-theme-primary !important;
}

// Styles for the UIShell from addons
.#{$prefix}--bmrg-header-modal {
  .#{$prefix}--modal-container {
    background-color: shell.$bmrg-theme-background;
    border-radius: var(--cds-border-radius, 0);

    * {
      &:focus,
      &::before {
        outline-color: shell.$bmrg-secondary !important;
        border-color: shell.$bmrg-secondary !important;
      }
    }

    .#{$prefix}--btn:focus {
      outline-color: shell.$bmrg-primary;
      border: initial !important;
    }

    .#{$prefix}--modal-content {
      color: var(--cds-text-primary);
      padding: 0 1rem;
      margin-bottom: 4rem;
    }
  }

  .#{$prefix}--modal {
    background-color: shell.$bmrg-header-modal-overlay; //default isrgba(theme.$layer-accent-01, 0.5)
  }
  
  .#{$prefix}--modal-close {
    &:hover {
      background-color: shell.$bmrg-header-hover-background;
    }
    &:focus {
      outline: utils.rem(1px) solid shell.$bmrg-secondary;
    }
    svg {
      fill: shell.$bmrg-theme-primary;
    }
  }

  .#{$prefix}--modal-content {
    width: 100%;
  }

  .#{$prefix}--modal-header__label {
    color: shell.$bmrg-theme-primary;
    text-transform: initial;
  }

  .#{$prefix}--modal-header__heading {
    height: utils.rem(26px);
    color: shell.$bmrg-theme-primary;
    font-size: utils.rem(20px);
  }

  .#{$prefix}--modal-close__icon {
    svg,
    polygon,
    path {
      fill: shell.$bmrg-brand-white;
    }
  }
  .#{$prefix}--modal-footer {
    background-color: shell.$bmrg-primary;
    margin: 0;
    /** carbon 10 override */
    padding: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;

    .#{$prefix}--btn {
      border-radius: 0;

      &.#{$prefix}--btn--primary {
        border-bottom-right-radius: var(--cds-border-radius, 0);

        &.#{$prefix}--btn:disabled {
          opacity: 0.5;
          border: unset;
        }
      }

      &.#{$prefix}--btn--secondary {
        border-bottom-left-radius: var(--cds-border-radius, 0);
      }
    }
  }

  .#{$prefix}--accordion__heading {
    &:hover:before {
      background-color: shell.$bmrg-header-hover-background;
    }

    &:focus:before {
      border-color: shell.$bmrg-secondary;
    }
  }
}

// Styles for Boomerang theme
@if ($use-theme-boomerang) {
  // Some additional overrides to carbon base styles
  // add :root to have a higher level of specificity and not rely in import order

  // Set at root, only if theme is actually set
  :root[data-carbon-theme="boomerang"] {
    @include utils.create-properties(theme-boomerang.$shell-tokens);

    button,
    html [type="button"],
    [type="reset"],
    [type="submit"] {
      appearance: none;
    }

    .#{$prefix}--btn {
      border-radius: var(--cds-border-radius, 0);
    }

    .#{$prefix}--tooltip {
      z-index: 9999;
    }

    .#{$prefix}--loading-overlay {
      //harcoded to the RGBA value of the ui-background variable
      background-color: rgba(242, 244, 248, 0.5);
    }

    .#{$prefix}--skeleton {
      .#{$prefix}--data-table-header,
      .#{$prefix}--table-toolbar {
        display: none;
      }
    }

    .#{$prefix}--form-item {
      .#{$prefix}--text-input,
      .#{$prefix}--text-area,
      .#{$prefix}--number input[type="number"] {
        border: none;
        border-bottom: none;
        border-radius: var(--cds-border-radius, 0);
      }
    }

    .#{$prefix}--date-picker__input,
    .#{$prefix}--dropdown,
    .#{$prefix}--dropdown-text,
    .#{$prefix}--overflow-menu-options,
    .#{$prefix}--select-input,
    .#{$prefix}--search .#{$prefix}--search-input,
    .#{$prefix}--list-box,
    .#{$prefix}--list-box input[role="combobox"],
    .#{$prefix}--list-box__field[aria-expanded="true"],
    .#{$prefix}--list-box__field,
    .#{$prefix}--text-area,
    .#{$prefix}--text-input {
      border: none;
      border-radius: var(--cds-border-radius, 0);
    }

    .#{$prefix}--text-area__wrapper {
      width: 100%;
    }

    .#{$prefix}--form-requirement {
      color: theme.$support-error;
      &::before {
        content: "";
      }
    }

    .#{$prefix}--label,
    .#{$prefix}--list-box__label {
      color: theme.$text-primary;
      font-family: "IBM Plex Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

    .#{$prefix}--modal-container {
      border-radius: var(--cds-border-radius, 0);
    }

    .#{$prefix}--modal-footer {
      border-bottom-right-radius: var(--cds-border-radius, 0);
      border-bottom-left-radius: var(--cds-border-radius, 0);
      .#{$prefix}--btn {
        border-radius: 0;

        &:first-child {
          border-bottom-left-radius: var(--cds-border-radius, 0);
        }

        &:last-child {
          border-bottom-right-radius: var(--cds-border-radius, 0);
        }

        &:last-child:first-child {
          border-bottom-left-radius: 0;
        }
      }
    }

    .#{$prefix}--search--xl {
      .#{$prefix}--search-input,
      .#{$prefix}--search-close {
        height: 2.5rem;
      }
    }

    // .#{$prefix}--btn--field {
    //   height: 2.5rem;
    //   min-height: 2.5rem;
    // }

    .#{$prefix}--checkbox-label::before {
      border-radius: 0.15rem;
    }

    .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label:before,
    .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label:before {
      border-color: #005d5d;
    }

    .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before {
      background-color: theme.$support-success;
      border-color: theme.$support-success;
    }

    .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
      max-height: 24rem;
    }

    .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
      border-bottom: none;
    }

    .#{$prefix}--tag {
      font-size: 0.75rem;
    }

    .#{$prefix}--side-nav__item--large.#{$prefix}--side-nav__submenu {
      height: 3rem;
    }

    // DataTable Overrides
    .#{$prefix}--data-table:not(.#{$prefix}--skeleton)
      th:first-of-type:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-checkbox) {
      padding-left: 0;
    }

    .#{$prefix}--data-table .#{$prefix}--table-header-label {
      padding: 0.875rem 1rem;
    }

    .#{$prefix}--table-sort {
      padding: 0 1rem 0 0;
    }

    .#{$prefix}--data-table:not(.#{$prefix}--skeleton) th:not(.#{$prefix}--table-column-checkbox) {
      padding: 0;
    }

    .#{$prefix}--data-table td {
      max-width: 20rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}