@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-modal {
  @include mixins.sky-border(dark, top, bottom, left, right);
  position: fixed;
  width: auto;
  left: 0;
  right: 0;
  top: 20px;
  margin: $sky-margin;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sky-modal:focus {
  outline: none;
}

.sky-modal-header:has(.sky-modal-header-content:empty) {
  display: none;
}

@media (min-width: $sky-screen-sm-min) {
  .sky-modal:not(.sky-modal-large) {
    margin: 0 auto;
  }

  .sky-modal-small {
    width: 300px;

    .sky-modal-content,
    .sky-modal-header,
    .sky-modal-footer {
      max-width: 300px;
    }
  }

  .sky-modal-medium {
    width: 600px;

    .sky-modal-content,
    .sky-modal-header,
    .sky-modal-footer {
      max-width: 600px;
    }
  }
}

@media (min-width: 920px) {
  .sky-modal-large {
    margin: 0 auto;
    width: 900px;

    .sky-modal-content,
    .sky-modal-header,
    .sky-modal-footer {
      max-width: 900px;
    }
  }
}

.sky-modal-content {
  background-color: #fff;
  --sky-background-color-page-default: #fff;

  &:focus {
    outline-style: dotted;
    outline-width: thin;
    outline-offset: -1px;
  }
}

.sky-modal-tiled .sky-modal-content {
  background-color: $sky-background-color-neutral-light;
  --sky-background-color-page-default: $sky-background-color-neutral-light;

  ::ng-deep .sky-tile-title {
    @include mixins.sky-subsection-heading();
  }
}

.sky-modal-header {
  /* Need less padding because of the close button padding */
  padding-left: $sky-padding-plus-half;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-right: 3px;

  background-color: #fff;

  display: flex;
  align-items: baseline;
  @include mixins.sky-border(light, bottom);
}

.sky-modal-header-buttons {
  // An extremely small value is needed to allow the
  // buttons to wrap on extra-small breakpoints (<200px).
  flex-shrink: 0.0001;

  .sky-btn {
    border: none;
    @include mixins.sky-icon-button-borderless;
  }
}

.sky-modal-header-content {
  flex-grow: 1;
}

.sky-modal-header {
  flex-shrink: 0;
  z-index: 2;
}

.sky-modal-content {
  overflow-y: auto;
}

.sky-modal-footer {
  flex-shrink: 0;
  z-index: 2;
}

.sky-modal-full-page {
  width: 100%;
  top: 0;
  margin: 0;

  .sky-modal-header-buttons sky-icon[icon='close'] {
    font-size: 20px;
  }
}

.sky-modal-full-page .sky-modal-content {
  flex-grow: 1;
}

.sky-modal-content > ::ng-deep sky-dock {
  bottom: -$sky-padding-plus-half;
  margin-left: -$sky-margin-plus-half;
  margin-bottom: -$sky-margin-plus-half;
  padding-top: $sky-padding-plus-half;
  width: calc(100% + 30px);
}

@include mixins.sky-theme-modern {
  .sky-modal-header {
    border: none;
    padding: $sky-theme-modern-space-lg $sky-theme-modern-space-xl;
  }

  .sky-modal-btn-help,
  .sky-modal-btn-close {
    display: none;
  }

  .sky-modal-content {
    padding: 0;
  }

  .sky-modal-full-page {
    width: calc(100% - (#{$sky-theme-modern-space-xl * 2}));
    margin: $sky-theme-modern-space-xl;
  }

  .sky-modal-content > ::ng-deep sky-dock {
    bottom: 0;
    margin-left: initial;
    margin-bottom: initial;
    padding-top: initial;
    width: 100%;
  }

  .sky-modal-viewkeeper {
    .sky-modal-header {
      box-shadow: none !important;
    }

    .sky-modal-content ::ng-deep sky-modal-content > .sky-viewkeeper-fixed {
      box-shadow: 0px 4px 8px -4px rgb(0 0 0 / 30%);

      > sky-toolbar .sky-toolbar-container {
        background-color: #fff;
        --sky-background-color-page-default: #fff;
        padding-left: $sky-theme-modern-space-xl;
        padding-right: $sky-theme-modern-space-xl;
      }
    }
  }
}

@include mixins.sky-theme-modern-dark {
  .sky-modal {
    border-color: $sky-theme-modern-mode-dark-background-color-page-default;
  }

  .sky-modal-header {
    color: $sky-theme-modern-mode-dark-font-body-default-color;
  }

  .sky-modal-header,
  .sky-modal-content {
    background-color: transparent;
    --sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default;
  }
}
