@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";
@use "../../variables/units";

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

@use "banner.mixins" as banner-mixins;
@use "banner.variables" as banner-variables;

// HTML/CSS
.dso-banner {
  @include banner-mixins.root();
  @include banner-mixins.children();

  .dso-banner-inner {
    margin-inline: auto;

    @media (min-width: media-query-breakpoints.$screen-sm-min) {
      inline-size: banner-variables.$banner-sm;
    }

    @media (min-width: media-query-breakpoints.$screen-md-min) {
      inline-size: banner-variables.$banner-md;
    }

    @media (min-width: media-query-breakpoints.$screen-lg-min) {
      inline-size: banner-variables.$banner-lg;
    }
  }

  .dso-banner-inner::before {
    content: "";
    display: inline-block;
    inset-inline-start: units.$u2;
    position: absolute;
    inset-block-start: 0;
  }

  &.dso-icon {
    .dso-banner-inner {
      @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
        padding-inline-start: banner-variables.$inline-start-padding;
      }

      @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
        padding-block-start: banner-variables.$small-padding-block-start;

        > .dso-rich-content {
          padding-inline-end: 0;
        }
      }
    }
  }

  &.alert-success {
    @include banner-mixins.success();

    &.dso-icon {
      @include banner-mixins.with-icon("success");
    }
  }

  &.alert-error {
    @include banner-mixins.error();

    &.dso-icon {
      @include banner-mixins.with-icon("error");
    }
  }

  &.alert-info {
    @include banner-mixins.info();

    &.dso-icon {
      @include banner-mixins.with-icon("info-solid");
    }
  }

  &.alert-warning {
    @include banner-mixins.warning();

    &.dso-icon {
      @include banner-mixins.with-icon("warning");
    }
  }

  a {
    &.download {
      @include di.variant("download-grijs90");
    }

    &.extern {
      @include di.variant("external-link-grijs90");
    }
  }
}

// Web Component
dso-banner {
  @include banner-mixins.children();

  .dso-banner-inner {
    margin-inline: auto;

    @media (min-width: media-query-breakpoints.$screen-sm-min) {
      inline-size: banner-variables.$banner-sm;
    }

    @media (min-width: media-query-breakpoints.$screen-md-min) {
      inline-size: banner-variables.$banner-md;
    }

    @media (min-width: media-query-breakpoints.$screen-lg-min) {
      inline-size: banner-variables.$banner-lg;
    }
  }

  .dso-banner-inner::before {
    content: "";

    position: absolute;
    inset-inline-start: units.$u2;
    inset-block-start: 0;

    display: inline-block;
  }

  &[icon] {
    .dso-banner-inner {
      @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
        padding-inline-start: banner-variables.$inline-start-padding;
      }

      @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
        padding-block-start: banner-variables.$small-padding-block-start;

        > .dso-rich-content {
          padding-inline-end: 0;
        }
      }
    }
  }

  &[status="success"] {
    @include banner-mixins.success();

    &[icon] {
      @include banner-mixins.with-icon("success");
    }
  }

  &[status="error"] {
    @include banner-mixins.error();

    &[icon] {
      @include banner-mixins.with-icon("error");
    }
  }

  &[status="info"] {
    @include banner-mixins.info();

    &[icon] {
      @include banner-mixins.with-icon("info-solid");
    }
  }

  &[status="warning"] {
    @include banner-mixins.warning();

    &[icon] {
      @include banner-mixins.with-icon("warning");
    }
  }
}