@use "uswds-core" as *;

// Variables
$slim-header-height: units(8) !default; // 64px
$slim-header-icon-size: units(5) !default; // 40px
$slim-header-border-color: color("cob-charles-blue") !default;
$slim-header-background-color: color("white") !default;
$slim-header-separator-color: color("ink") !default;
$slim-header-text-color: color("ink") !default;

// Reset styles for the component
%reset-text {
  font-family: family("sans");
  font-size: size("body", "xs");
  line-height: line-height("body", 2);
  -webkit-text-size-adjust: none;
  font-feature-settings: normal;
  font-kerning: auto;
}

// Component styles
.cob-slim-header {
  @include typeset;
  @include border-box-sizing;
  background-color: $slim-header-background-color;
  border-bottom: 1px solid #F2F2F2;
  width: 100%;

  &--sticky {
    position: sticky;
    top: 0;
    z-index: z-index(100);
  }

  &__content {
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: $slim-header-height;
    padding: 0 units(2);
    position: relative;
  }

  &__logo-link {
    @include add-knockout-font-smoothing;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-right: units(2);
    padding-left: 0;
    position: relative;

    &:hover, &:focus {
      text-decoration: none;
    }
  }

  &__logo {
    display: block;
    height: $slim-header-icon-size;
    width: auto;
    min-width: calc($slim-header-icon-size * 3.5);
    object-fit: contain;

    &--mobile {
      display: none;
    }
  }

  &__separator {
    @include u-display("block");
    @include u-width(1px);
    @include u-height(3);
    @include u-bg("ink");
    @include u-margin-x(2);
  }

  &__mayor-text {
    @include typeset-p;
    font-style: italic;
    @include u-margin(0);
    @include u-padding(0);
    @include u-text("ink");
    @include u-white-space("no-wrap");
    display: flex;
    align-items: center;
    margin-left: units(2);
    margin-top: 0 !important;
  }

  &__additional-content {
    @include typeset-p;
    @include u-margin(0);
    @include u-padding(0);
    @include u-text("ink");
    @include u-white-space("no-wrap");
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    margin-left: auto;
    padding-right: 0;
  }
}

// Mobile adjustments
@include at-media-max("desktop") {
  .cob-slim-header {
    &__content {
      height: units(5); // Reduced height for mobile
      padding: 0 units(0.5); // Further reduced padding
    }

    &__logo-link {
      margin-right: units(1); // Reduce margin
    }

    &__logo {
      display: none; // Hide desktop logo

      &--mobile {
        display: block; // Show mobile logo
        height: units(3); // 24px height for mobile
        width: units(6); // 48px width for mobile
        min-width: auto; // Remove min-width constraint
      }
    }

    &__separator {
      display: none; // Hide separator on mobile
    }

    &__mayor-text {
      display: none; // Hide text on mobile
    }

    &__additional-content {
      display: flex; // Show additional content if present
      margin-left: auto;
      font-size: size("body", "3xs"); // Reduce text size
    }
  }
}