@use '../../internals/Box/styles/index' as box;
@use '../../styles/colors/colors-base' as colors;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use '../../Modal/styles/animation';
@use './mixin';
@use './variables';

// Container that the drawer scrolls within
.rs-drawer {
  display: none;
  overflow: hidden;
  position: fixed;
  z-index: var(--rs-zindex-drawer);
  box-shadow: var(--rs-drawer-shadow);
  pointer-events: auto;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // Kill the scroll on the body
  &-open.rs-drawer-has-backdrop {
    overflow: hidden;
  }

  $sizes: lg, md, sm, xs;

  // Drawer sizes
  &-left,
  &-right {
    top: 0;
    height: 100%;
    width: var(--rs-drawer-inline-size);
    max-width: 100%;

    @each $size in $sizes {
      &.rs-drawer-#{$size} {
        --rs-drawer-inline-size: var(--rs-drawer-inline-size-#{$size});
      }
    }
  }

  &-top,
  &-bottom {
    width: 100%;
    height: var(--rs-drawer-block-size);

    @each $size in $sizes {
      &.rs-drawer-#{$size} {
        --rs-drawer-block-size: var(--rs-drawer-block-size-#{$size});
      }
    }
  }

  // Full page
  &-full {
    height: var(--rs-drawer-size-full);
    width: var(--rs-drawer-size-full);
  }

  // Drawer directions
  &-right {
    inset-inline-end: 0;
  }

  &-left {
    inset-inline-start: 0;
  }

  &-top {
    top: 0;
  }

  &-bottom {
    bottom: 0;
  }
}

.rs-drawer-wrapper {
  position: fixed;
  z-index: var(--rs-zindex-drawer);
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;

  &.rs-drawer-no-backdrop {
    pointer-events: none;
  }
}

// Make sure drawer can be show in Safari.
.rs-drawer-open .rs-drawer {
  overflow: visible;
}

.rs-drawer-dialog {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--rs-bg-overlay);

  .rs-drawer-shake & {
    animation: 0.3s linear shakeHead;
  }

  @include color-modes.high-contrast-mode {
    background-color: var(--rs-drawer-bg);
  }
}

.rs-drawer-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  z-index: var(--rs-zindex-drawer);
  background-color: var(--rs-bg-backdrop);

  // Fade for backdrop
  &.rs-anim-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }

  &.rs-anim-in {
    opacity: 1;
  }
}

// Drawer header
// Top section of the modal title.
.rs-drawer-header {
  @include utils.clearfix;

  position: relative;
  padding-block: 20px;
  padding-inline: 60px 40px;
  border-bottom: 1px solid var(--rs-border-primary);
  display: flex;

  .rs-drawer-header-close {
    position: absolute;
    inset-inline-start: 15px;
    top: 23px;
  }
}

.rs-drawer-title {
  display: inline-flex;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0;
  color: var(--rs-text-heading);
  font-weight: normal;
  font-size: var(--rs-drawer-title-font-size);
  line-height: var(--rs-drawer-title-line-height);

  @include utils.ellipsis-basic;
}

.rs-drawer-actions {
  @include utils.clearfix; // clear it in case folks use .pull-* classes on buttons

  flex-shrink: 0;
  text-align: end; // right align buttons
  border-top: none;
  margin-inline-start: auto;

  .rs-drawer-title ~ & {
    margin-inline-start: 10px;
  }

  // Properly space out buttons
  .rs-btn + .rs-btn {
    margin-inline-start: 10px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .rs-btn-group .rs-btn + .rs-btn {
    margin-inline-start: -1px;
  }
  // and override it for block buttons as well
  .rs-btn-block + .rs-btn-block {
    margin-inline-start: 0;
  }
}

// Drawer body
.rs-drawer-body {
  position: relative;
  padding: var(--rs-drawer-body-padding);
  height: 100%;
  overflow: auto;

  .rs-drawer-header + & {
    height: calc(100% - 76px);
  }

  &-close {
    position: absolute;
    inset-inline-start: 15px;
    top: 25px;

    .rs-drawer-header ~ .rs-drawer-body & {
      display: none;
    }
  }
}

// Measure scrollbar width for padding body during modal show/hide
.rs-drawer-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Footer (for actions)
// todo rs-drawer-footer has been deprecated, remove the styles once the component API is removed
.rs-drawer-footer {
  @include utils.clearfix; // clear it in case folks use .pull-* classes on buttons

  text-align: end; // right align buttons
  border-top: none;
  margin: 0 var(--rs-drawer-footer-spacing) var(--rs-drawer-footer-spacing);

  // Properly space out buttons
  .rs-btn + .rs-btn {
    margin-inline-start: 10px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .rs-btn-group .rs-btn + .rs-btn {
    margin-inline-start: -1px;
  }
  // and override it for block buttons as well
  .rs-btn-block + .rs-btn-block {
    margin-inline-start: 0;
  }
}