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

sky-modal-footer {
  display: block;
}

.sky-modal-footer-container {
  background-color: #fff;
  @include mixins.sky-border(light, top);
  /* Offset the margin-left of the link */
  .sky-btn-link:first-child {
    margin-left: -12px;
  }

  .sky-btn + .sky-btn {
    margin-left: $sky-margin;
  }

  .sky-btn + .sky-btn-link {
    margin-left: -2px;
  }

  .sky-modal-footer-errors {
    max-height: 100px;
    overflow-y: auto;

    .footer-error {
      display: block;
    }
  }
}

.sky-theme-modern {
  .sky-modal-footer-container {
    border-top: none;
    padding: $sky-theme-modern-space-lg $sky-theme-modern-space-xl;

    .sky-btn-link:first-child {
      margin-left: 0;
    }

    .sky-btn + .sky-btn-link {
      margin-left: $sky-margin;
    }
  }
}

.sky-theme-modern-dark {
  .sky-modal-footer-container {
    background-color: transparent;
  }
}
