@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('sky-box') {
  --sky-override-box-content-padding: var(--sky-padding-even-xl);
  --sky-override-box-header-container-padding: var(--sky-padding-even-xl)
    var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);
  --sky-override-box-header-padding-right: var(--sky-margin-inline-xl);
}

@include compatMixins.sky-modern-overrides('sky-box', false) {
  --sky-override-box-header-padding-right: var(--sky-margin-inline-xl);
}

sky-box {
  display: block;
}

.sky-box {
  background-color: #fff;
  border-radius: var(--sky-box-border-radius);
  overflow: var(--sky-box-overflow);

  .sky-box-header-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    padding: var(
      --sky-override-box-header-container-padding,
      var(--sky-space-inset-bottomless-top-xl)
        var(--sky-space-inset-bottomless-right-xl)
        var(--sky-space-inset-bottomless-bottom-xl)
        var(--sky-space-inset-bottomless-left-xl)
    );

    &:empty {
      display: none;
    }

    sky-box-controls {
      margin-left: auto;

      .sky-box-controls {
        position: relative;
        top: -2px;
      }
    }

    .sky-box-header-right {
      flex: 1 0;
      padding-right: var(
        --sky-override-box-header-padding-right,
        var(--sky-space-gap-text_action-l)
      );
    }

    h2,
    h3,
    h4,
    h5 {
      display: inline;
      margin-block: 0;
    }
  }

  sky-box-content {
    .sky-box-content {
      padding: var(
        --sky-override-box-content-padding,
        var(--sky-space-inset-balanced-xl)
      );
    }
  }
}
