@import '../../mixins/z-index';
@import '../../mixins/box-sizing';
@import '../../mixins/focus-state';
@import '../../../../../typography/utilities/typography-utility';

// Screen breakpoints
$screen-s: 320px;
$screen-md: 672px;
$screen-l: 1056px;
$screen-xl: 1312px;
$screen-xxl: 1584px;

// Modal dimensions
$modal-max-height: 85vh;
$modal-actions-height: 36px;
$scrollbar-width: 6px;
$scrollbar-radius: 3px;
$modals: (
  $screen-s: (
    xs: 100%,
    sm: 100%,
    md: 100%,
    lg: 100%,
  ),
  $screen-md: (
    xs: 50%,
    sm: 62.5%,
    md: 75%,
    lg: 100%,
  ),
  $screen-l: (
    xs: 31.25%,
    sm: 43.75%,
    md: 62.5%,
    lg: 75%,
  ),
  $screen-xl: (
    xs: 31.25%,
    sm: 37.5%,
    md: 62.5%,
    lg: 75%,
  ),
  $screen-xxl: (
    xs: 25%,
    sm: 37.5%,
    md: 50%,
    lg: 75%,
  ),
);

/* MIXINS */

@mixin modal-scrollbar {
  &::-webkit-scrollbar {
    width: $scrollbar-width;
    background-color: transparent;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--foreground-elements-transparparent-discrete);
    border-radius: $scrollbar-radius;
  }
}

@mixin modal-header {
  display: flex;
  padding: 16px;
  position: sticky;
  top: 0;
  background-color: var(--background-elevation-layer-02);
  z-index: 1;
}

@mixin modal-header-title {
  @include headline-05;

  color: var(--foreground-text-strong);
  margin: 0;
  flex: 1;
}

@mixin modal-body {
  @include body-01;

  color: var(--foreground-text-strong);
  overflow-y: visible;
  padding: 0 16px 16px;
  @include modal-scrollbar;
}

@mixin modal-position {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* MODAL STYLING */

.tds-modal {
  @include tds-box-sizing;

  box-shadow: var(--tds-modal-box-shadow);
  background-color: var(--background-elevation-layer-02);
  margin: auto;
  position: relative;
  border-radius: var(--radius-narrow);
  max-height: $modal-max-height;
  overflow-y: auto;
  pointer-events: auto;
  @include modal-scrollbar;

  &__actions-sticky {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .body {
      @include body-01;

      max-height: calc(#{$modal-max-height} - #{$modal-actions-height});
      overflow-y: auto;
    }

    slot[name='actions'] {
      bottom: -1px;
      left: 0;
      right: 0;
      background-color: var(--background-elevation-layer-02);
      padding: 24px 16px 16px;
      display: flex;
      gap: 16px;
    }
  }

  &__actions-static {
    slot[name='actions'] {
      background-color: var(--background-elevation-layer-02);
      display: flex;
      gap: 16px;
      padding: 24px 16px 16px;
    }
  }
}

//Width of Modals in different breakpoints
@each $screen, $modals in $modals {
  @media (min-width: $screen) {
    @each $modal, $value in $modals {
      .tds-modal-#{$modal} {
        width: $value;
      }
    }
  }
}

@media (max-width: $screen-s) {
  .tds-modal-md,
  .tds-modal-lg,
  .tds-modal-sm {
    height: 100%;

    slot[name='actions']::slotted(*) {
      display: flex;
    }
  }
}

/* MODAL SUB ELEMENTS */

.header {
  @include modal-header;
}

.header,
slot[name='header']::slotted(*) {
  @include modal-header-title;
}

.body {
  @include modal-body;
}

.tds-modal-backdrop {
  @include tds-box-sizing;
  @include modal-position;

  background-color: var(--tds-modal-backdrop-background);
  pointer-events: auto;
}

button.tds-modal-close {
  margin: 0 0 auto auto;
  background-color: transparent;
  border: 0;
  padding: 0;
  appearance: unset;
}

.tds-modal-close {
  display: inline-block;
  height: auto;
  color: var(--foreground-text-strong);
  cursor: pointer;

  &:focus {
    @include tds-focus-state;
  }

  @media (min-width: $screen-s) {
    margin-left: 16px;
  }

  @media (min-width: $screen-l) {
    margin-left: 48px;
  }
}

.tds-modal-close-btn {
  display: inline-block;
  height: auto;
  background-repeat: no-repeat;
  cursor: pointer;

  @media (min-width: $screen-s) {
    margin-left: 16px;
  }

  @media (min-width: $screen-l) {
    margin-left: 48px;
  }

  svg {
    fill: var(--foreground-text-strong);
  }
}

.tds-modal-overflow {
  overflow: hidden;
}

/* WEB COMPONENT STUFF */

:host {
  @include tds-box-sizing;
  @include modal-position;

  padding: 0 16px;
  z-index: tds-z-index(modal);
  pointer-events: none;

  .tds-modal-close {
    border: none;
    background-color: transparent;
  }

  .tds-modal-close-btn {
    border: none;
    background-color: transparent;
  }

  @media (max-width: $screen-s) {
    padding: 0;
  }

  &.show {
    display: flex;
  }

  &.hide {
    display: none;
  }
}

:host(.show) {
  display: flex;
}

:host(.hide) {
  display: none;
}