/* stylelint-disable no-invalid-position-at-import-rule */
@use '@angular/material' as mat;
@use '../core/style/spacing' as *;
@use '../core/layout/breakpoints' as *;

$uxg-toolbar-height: 56px;
$uxg-toolbar-margin: $uxg-spacing-2;

.uxg-toolbar.uxg-toolbar-elevated {
  @include mat.elevation(4);
}

.uxg-toolbar.mat-toolbar {
  padding: $uxg-spacing-0 $uxg-toolbar-margin;

  .uxg-logo[dense],
  .uxg-breadcrumb {
    margin-left: $uxg-spacing-2;
  }

  .uxg-logo {
    display: none;
  }

  .uxg-toolbar-actions {
    display: none;
  }

  .mat-stroked-button {
    margin-right: $uxg-toolbar-margin;
  }

  & > .mat-toolbar-row {
    padding: $uxg-spacing-0;
  }

  &.mat-toolbar-single-row {
    height: $uxg-toolbar-height;

    > * {
      margin-top: $uxg-spacing-0;
      margin-bottom: $uxg-spacing-0;
    }
  }
}

/* Small Tablet */
@media only screen and (min-width: $small-tablet-size-down) and (max-width: $small-tablet-size-up) {
  .uxg-toolbar.mat-toolbar {
    .uxg-logo[dense],
    .uxg-breadcrumb {
      margin-left: $uxg-spacing-4;
    }

    .uxg-logo {
      display: none;
    }
  }
}

/* Large Tablet */
@media only screen and (min-width: $large-tablet-size-down) and (max-width: $large-tablet-size-up) {
  .uxg-toolbar.mat-toolbar {
    .uxg-logo[dense],
    .uxg-breadcrumb {
      margin-left: $uxg-spacing-4;
    }

    .uxg-logo {
      display: block;
      margin-left: $uxg-spacing-5;
    }
  }
}

/* Desktop Styles */
@media only screen and (min-width: $desktop-size-down) {
  .uxg-toolbar.mat-toolbar {
    .uxg-logo[dense],
    .uxg-breadcrumb {
      margin-left: $uxg-spacing-4;
    }

    .uxg-logo {
      display: block;
      margin-left: $uxg-spacing-5;
    }

    .uxg-toolbar-actions {
      display: flex;
      align-items: center;
    }

    .uxg-toolbar-icon-menu {
      display: none;
    }
  }
}