@use '@linzjs/lui/dist/scss/Foundation/Variables/ColorVars' as colors;
@use '@linzjs/lui/dist/scss/Foundation/Utilities/BoxShadow' as shadow;
@use '@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars' as spacing;
@use '@linzjs/lui/dist/scss/Foundation/Variables/FormVars' as form;
@use '@linzjs/lui/dist/scss/Foundation/Variables/FontVars' as fonts;
@use '@linzjs/lui/dist/scss/Foundation/Utilities/REM' as rem;

dialog.LuiModalAsync,
div.LuiModalAsync {
  @include fonts.font-regular();
  font-size: fonts.$base-font-size;
  line-height: fonts.$base-line-height;
  color: colors.$base-type-color;

  .LuiModalAsync-header {
    h4 {
      @include fonts.font-regular();
      font-size: rem.toRem(22px);
      line-height: 1.5;
      margin-bottom: 0;
      color: colors.$heading-color;
    }
  }
}

dialog.LuiModalAsync::backdrop {
  background: rgb(0 0 0 / 10%);
}

dialog.LuiModalAsync,
div.LuiModalAsync {
  box-sizing: border-box;

  @include shadow.drop-shadow(sm);
  border: none;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  padding: spacing.$unit-md;
  min-width: 400px;
  max-width: 80vw;
  max-height: 80vh;
  gap: spacing.$unit-md;

  &:focus-visible {
    outline: none;
  }

  .LuiModalAsync-header-icon {
    fill: colors.$info;
  }

  .LuiModalAsync-help-icon * {
    fill: colors.$gray;
  }

  &.LuiModalPrefab-success {
    .LuiModalAsync-header .LuiModalAsync-header-icon {
      fill: colors.$success;
    }

    border-left: spacing.$unit-xs solid colors.$success;
  }

  &.LuiModalPrefab-info {
    .LuiModalAsync-header .LuiModalAsync-header-icon {
      fill: colors.$info;
    }

    border-left: 0;
  }

  &.LuiModalPrefab-warning {
    .LuiModalAsync-header .LuiModalAsync-header-icon {
      fill: colors.$warning;
    }

    border-left: spacing.$unit-xs solid colors.$warning;
  }

  &.LuiModalPrefab-error {
    .LuiModalAsync-header .LuiModalAsync-header-icon {
      fill: colors.$error;
    }

    border-left: spacing.$unit-sm solid colors.$error;
  }

  &.LuiModalPrefab-blocked {
    .LuiModalAsync-header .LuiModalAsync-header-icon {
      fill: colors.$fuscous;
    }

    border-left: 0;
  }

  &.LuiModalPrefab-progress {
    border-left: 0;
  }

  h4 {
    margin-top: 0;
  }

  .LuiModalAsync-ButtonGroup {
    display: flex;

    button {
      flex: 1;
      border-color: transparent;
    }
  }

  .LuiModalAsync-header {
    display: flex;
    gap: spacing.$unit-xs;

    flex-direction: row;
    align-items: center;

    h4 {
      flex: 1;
      color: colors.$charcoal;
    }
  }

  .LuiModalAsync-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: spacing.$unit-rg;
    overflow: hidden;
  }

  .LuiModalAsync-content {
    flex: 1;
    overflow: auto;
    font-weight: 400;
  }

  .lui-button:focus {
    outline: form.$input-border-width solid colors.$input-focus;
  }
}

dialog.LuiModalPrefab-file {
  gap: spacing.$unit-sm;
  padding: spacing.$unit-md;

  .LuiModalAsync-content {
    padding-bottom: spacing.$unit-xs;
  }
}