/*
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/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/headerTeamSwitcher";
@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;
    }
  }
}