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

@include mixins.sky-host-responsive-container-xs-min() {
  .sky-sectioned-form {
    display: block;
    max-height: none;
  }

  .sky-sectioned-form-content {
    flex-basis: auto;
    overflow-y: visible;
  }

  .sky-sectioned-form-tabs {
    flex-basis: auto;
    overflow-y: visible;
  }

  .sky-sectioned-form-tabs + .sky-sectioned-form-content {
    border-left: 1px solid var(--sky-border-color-neutral-medium);
  }

  .sky-sectioned-form-content {
    padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);
  }

  .sky-sectioned-form-tabs-only {
    padding: var(--sky-padding-even-md);
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-sectioned-form {
    display: flex;
    max-height: 100%;
  }

  .sky-sectioned-form-content {
    flex-basis: 70%;
    overflow-y: auto;
  }

  .sky-sectioned-form-tabs {
    flex-basis: 30%;
    overflow-y: auto;
  }
}

:host-context(sky-modal) {
  .sky-sectioned-form {
    min-height: 460px;
  }
}

:host-context(sky-modal-content) > {
  :host .sky-sectioned-form,
  form :host .sky-sectioned-form {
    margin: -$sky-margin-plus-half;
  }
}

.sky-sectioned-form-tabs-hidden {
  display: none;
}

.sky-sectioned-form-content-hidden {
  display: none;
}

@include mixins.sky-theme-modern {
  :host-context(sky-modal-content) > {
    :host .sky-sectioned-form,
    form :host .sky-sectioned-form {
      margin: (-$sky-theme-modern-space-sm) (-$sky-theme-modern-space-xl)
        (-$sky-theme-modern-space-xl) (-$sky-theme-modern-space-xl);
    }
  }
}
