@import '../abstract/_all';

.md-drawer-overlay {
  background-color: rgba(0, 0, 0, .5);
  border: none;
  bottom: 0;
  height: auto;
  inset-inline-end: 0;
  inset-inline-start: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity 0.3s ease-in-out;
  width: auto;
  z-index: 2000;
}

.md-drawer {
  --md-drawer-padding-inline: 20px;
  
  @media (min-width: $break-sm) {
    --md-drawer-padding-inline: 40px;
  }

  align-items: stretch;
  background-clip: padding-box;
  background-color: $c-white;
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  inset-inline-end: 0;
  justify-content: flex-start;
  max-width: 100%;
  outline: 0;
  position: fixed;
  top: 0;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;
  width: 424px;
  z-index: 2050;

  [dir='rtl'] & {
    transform: translateX(-100%);
  }
}

.md-drawer-content {
  display: contents;
}

.md-drawer-header {
  flex: 0 1 auto;
  align-items: center;
  column-gap: 16px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 48px;
  padding-block: 8px;
  padding-inline-end: calc(var(--md-drawer-padding-inline) - 8px);
  padding-inline-start: var(--md-drawer-padding-inline);

  @media (min-width: $break-sm) {
    min-height: 60px; 
  }
}

.btn.md-btn-drawer-close {
  align-items: center;
  align-self: flex-start;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  justify-content: center;
  margin-block: 0;
  margin-inline-start: auto;
  margin-inline:  auto 0;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  width: auto;

  @media (min-width: $break-sm) {
    margin-top: 6px;
  }
}

.md-drawer-body {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  justify-content: flex-start;
  overflow-y: auto;
  padding-block: 24px;
  padding-inline: var(--md-drawer-padding-inline);

}

.md-drawer-footer {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding-block: 16px;
  padding-inline: var(--md-drawer-padding-inline);
}

.md-drawer-footer-action {
  flex: 1 1 auto;
}

.md-drawer-close {
  display: contents;
}

.md-drawer.md-drawer-sm {
  width: 424px;
}

.md-drawer.md-drawer-xl {
  width: 720px;
}

.md-drawer.md-drawer-reset {
  .md-drawer-body,
  .md-drawer-footer {
    --md-drawer-padding-inline: 0;
    padding-block: 0;
  }
}

body {
  &.md-open-drawer {
    .md-drawer {
      transform: translateX(0);
    }
    .md-drawer-overlay {
      opacity: 1;
      pointer-events: auto;
    }
  }
}