@use "../../di";

@use "../../utilities";
@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/typography";
@use "../button";
@use "../icon";

@use "../grid/grid.variables.scss" as grid-variables;
@use "../../global/mixins/set-colors.mixin" as set-colors;
@use "document-header.variables" as document-header-variables;

.dso-document-header {
  @include set-colors.apply(colors.$grijs-5, "document-header");

  padding-block: units.$u1 calc(grid-variables.$grid-gutter-width * 0.5);
  padding-inline: units.$u3;
  margin-inline: -#{units.$u2} -#{units.$u2};

  &:has(.dso-document-header-status) {
    padding-block-start: 0;
  }

  #{typography.$headings} {
    font-size: 1.5rem;
    line-height: 1.5; // 36px

    button {
      text-align: start;
      border: 0;
      padding: 0;
    }
  }

  &:not(.dso-document-header-sticky) {
    #{typography.$headings} {
      button {
        cursor: default;
      }
    }
  }

  &.dso-variant-ontwerp {
    .dso-document-header-status {
      @include set-colors.apply(colors.$geel, "document-header");
    }
  }

  &.dso-variant-besluitversie {
    .dso-document-header-status {
      @include set-colors.apply(colors.$bosgroen, "document-header");
    }
  }

  &.dso-document-header-sticky {
    position: sticky;
    inset-inline-start: 0;
    inset-block-start: 0;
    padding-block: 0 calc(#{units.$u1} * 0.5);
    border-block-start: document-header-variables.$sticky-border-width-style colors.$grijs-5;

    &.dso-variant-ontwerp {
      border-block-start: document-header-variables.$sticky-border-width-style colors.$geel;
    }

    &.dso-variant-besluitversie {
      border-block-start: document-header-variables.$sticky-border-width-style colors.$bosgroen;
    }

    #{typography.$headings} {
      margin-block-end: 0;

      button {
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        display: flex;
        text-align: start;
        inline-size: 100%;

        &::after {
          @include di.base("chevron-up-bosgroen");

          content: "";
          display: inline-block;
        }

        span {
          display: inline-block;
          margin-inline-end: units.$u1;
          max-inline-size: calc(100% - #{units.$u2 * 2});
          overflow: hidden;
          text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- We don't want wrapping in sticky document-header: full text in initial (scroll=0) position
          white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- We don't want wrapping in sticky document-header: full text in initial (scroll=0) position
        }
      }
    }

    .dso-document-header-container,
    .dso-document-header-status {
      display: none;
    }
  }

  h1,
  h3 {
    margin-block: 0 units.$u1;
  }

  .dso-document-header-status {
    display: flex;
    align-items: center;
    gap: units.$u1;
    padding-block: units.$ru1;
    padding-inline: units.$u3;
    margin-block-end: units.$u1;
    margin-inline: -#{units.$u3} -#{units.$u3};

    > dso-label,
    > .dso-label {
      margin-inline-end: calc(units.$u1 * -1);
    }

    .dso-document-header-badges {
      display: flex;
      gap: 8px;
    }
  }

  .dso-document-header-container {
    position: relative;
  }

  .dso-document-header-owner-wrapper {
    padding-inline-end: icon.$size + units.$u1;
  }

  .dso-document-header-type,
  .dso-document-header-owner {
    margin-block: 0 units.$u1;
    margin-inline: 0;
    display: inline-block;
  }

  .dso-document-header-map-action,
  .dso-document-header-toggle-features,
  .dso-document-header-toggle-status {
    @include button.tertiary();

    color: colors.$zwart;
    font-weight: normal;
  }

  .dso-document-header-map-action {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .dso-document-header-features-wrapper {
    margin-block-end: units.$u1;
  }

  dl.dso-document-header-features {
    margin-block-start: units.$u2;

    &:last-child {
      border-block-end: 1px solid colors.$grijs-20;
      padding-block-end: units.$u1;
      margin-block-end: calc(#{units.$u1} * 0.5);
    }
  }
}