@use "_variables" as *;
@use "_css-variables" as *;
@use "_mixins" as *;
@use "_button-mixins" as *;
@import "./_bootstrap-variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/spinners";

/* stylelint-disable-next-line at-rule-empty-line-before */
@import "bootstrap/scss/helpers/clearfix";
@import "bootstrap/scss/helpers/color-bg";
// @import 'bootstrap/scss/helpers/colored-links';
@import "bootstrap/scss/helpers/focus-ring";
@import "bootstrap/scss/helpers/icon-link";
@import "bootstrap/scss/helpers/ratio";
@import "bootstrap/scss/helpers/position";
@import "bootstrap/scss/helpers/stacks";
@import "bootstrap/scss/helpers/visually-hidden";
@import "bootstrap/scss/helpers/stretched-link";
@import "bootstrap/scss/helpers/text-truncation";
@import "bootstrap/scss/helpers/vr";

/* stylelint-disable-next-line at-rule-empty-line-before */
@import "bootstrap/scss/utilities/api";

body {
  --bs-border-color-translucent: #{pvar(--input-border-color)};

  --bs-body-color: #{pvar(--fg)};
  --bs-body-bg: #{pvar(--bg)};

  --bs-emphasis-color: #{pvar(--fg)};
}

.accordion {
  --bs-accordion-color: #{pvar(--fg)};
  --bs-accordion-bg: #{pvar(--bg)};

  --bs-accordion-btn-color: var(--bs-accordion-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
}

.popover {
  --bs-popover-bg: #{pvar(--bg-secondary-450)};
  --bs-popover-body-color: #{pvar(--fg-300)};
  --bs-popover-header-color: #{pvar(--fg-450)};

  font-family: $main-fonts;
}

.btn {
  --bs-btn-active-color: inherit;
  --bs-btn-active-bg: inherit;
  --bs-btn-active-border-color: inherit;
}

.btn-outline-primary {
  --bs-btn-color: #{pvar(--fg)};
  --bs-btn-border-color: #{pvar(--bg-secondary-450)};
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #{pvar(--bg-secondary-450)};
  --bs-btn-hover-border-color: #{pvar(--bg-secondary-450)};

  --bs-btn-active-color: #{pvar(--on-primary)};
  --bs-btn-active-bg: #{pvar(--primary)};
  --bs-btn-active-border-color: #{pvar(--primary)};
}

.flex-auto {
  flex: auto;
}

.c-hand {
  cursor: pointer !important;
}

.btn-group-vertical {
  label {
    margin-bottom: 0;
  }
}

// ---------------------------------------------------------------------------
// Dropdown
// ---------------------------------------------------------------------------

.dropdown-menu {
  --bs-dropdown-link-hover-bg: #{pvar(--bg-secondary-400)};
  --bs-dropdown-link-color: #{pvar(--fg)};
  --bs-dropdown-border-color: #{pvar(--input-border-color)};
  --bs-dropdown-header-color: #{pvar(--fg-350)};

  text-align: start;

  .dropdown-header {
    @include padding-left(1rem);
  }

  .dropdown-item {
    &.active {
      color: pvar(--on-primary) !important;
      background-color: pvar(--primary);
      font-weight: $font-semibold;
    }

    &::after {
      display: none;
    }
  }

  a {
    @include disable-default-a-behaviour;
  }
}

.dropdown-divider {
  margin: 0.3rem 0;
}

.disable-dropdown-caret::after {
  display: none;
}

// ---------------------------------------------------------------------------
// Alert
// ---------------------------------------------------------------------------

.alert {
  p:last-child {
    margin-bottom: 0;
  }
}

.alert-link {
  &:hover {
    opacity: 0.8;
  }
}

// ---------------------------------------------------------------------------
// Modal
// ---------------------------------------------------------------------------

@media screen and (min-width: #{breakpoint(md)}) {
  .modal::before {
    vertical-align: middle;
    content: " ";
    height: 100%;
  }

  .modal-dialog {
    &:not(.modal-lg):not(.modal-xl) {
      min-width: 500px;
      width: 40vw;
      max-width: 900px;
    }
  }
}

.modal {
  @include define-input-css-variables-in-modal;

  .modal-content {
    word-break: break-word;
  }

  .modal-header {
    border-bottom: 0;
    margin-bottom: 5px;

    .modal-title {
      font-size: 20px;
      font-weight: $font-semibold;

      @include margin-right(auto);
    }

    my-global-icon {
      opacity: 0.5;

      @include global-icon-size(22px);

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .inputs {
    margin-bottom: 0;
    text-align: end;

    > *:not(:first-child) {
      @include margin-left(10px);
    }
  }
}

// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
.modal-open {
  overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
  width: 100vw; // Make sure the content fits all the available width
}

// ---------------------------------------------------------------------------
// Nav
// ---------------------------------------------------------------------------

.nav {
  .nav-link,
  .unavailable-nav-link {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.nav-tabs {
  .nav-link,
  .unavailable-nav-link {
    color: pvar(--fg-100);
    font-weight: $font-semibold;
    border: 0;
    border-bottom: 2px solid transparent;
  }

  .nav-link {
    @include disable-default-a-behaviour;

    &.active {
      background-color: transparent !important;
      border-bottom-color: pvar(--border-primary);
    }

    &.active,
    &:hover,
    &:active,
    &:focus {
      opacity: 1;
      color: pvar(--fg);
    }
  }
}

// ---------------------------------------------------------------------------
// Card, collapse and accordion
// ---------------------------------------------------------------------------

.card {
  background-color: pvar(--bg);
  border-color: #dee2e6;
}

.accordion-button {
  font-size: 18px;

  my-global-icon {
    color: pvar(--secondary-icon-color);
  }

  &:not(.collapsed) {
    font-weight: $font-bold;

    my-global-icon {
      color: pvar(--fg);
    }
  }
}

// ---------------------------------------------------------------------------
// Buttons & form controls
// ---------------------------------------------------------------------------

.btn:not(.btn-sm) {
  font-size: $button-font-size;
}

.input-group {
  > .btn,
  > .input-group-text {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  > .input-group-text {
    line-height: normal;
    opacity: 0.9;
  }

  .input-group-text > .dropdown-toggle {
    display: flex;
  }
}

.input-group,
.btn-group {
  .last-in-group {
    border-top-right-radius: pvar(--input-border-radius) !important;
    border-bottom-right-radius: pvar(--input-border-radius) !important;
  }

  .first-in-group {
    border-top-left-radius: pvar(--input-border-radius) !important;
    border-bottom-left-radius: pvar(--input-border-radius) !important;
  }
}

.has-clear {
  input {
    padding-inline-end: 30px !important;
  }

  .form-control-clear {
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    opacity: 0.4;

    &:hover {
      opacity: 0.7;
      cursor: pointer;
    }
  }

  input:placeholder-shown + .form-control-clear {
    display: none;
  }
}

.text-truncate {
  // Prevent invalid height in parent: https://stackoverflow.com/a/22425601
  vertical-align: top;
}

// ---------------------------------------------------------------------------
// RTL compatibility
// ---------------------------------------------------------------------------

:root[dir="rtl"] .modal .modal-header .modal-title {
  margin-inline-end: auto;
  margin-right: unset;
}
