@use "@angular/material/core/style/elevation" as mat-elevation;
@use "variables/sizes";
@use "variables/colors";
@use "variables/breakpoints";

/*
 * outermost elements; make them as tall as possible.
 * Consumes all of the available screen
 */
html,
body {
  /* height: 100%; */
}

/**  Toolbar  **/

/*
 * Directive for the only toolbar row.
 * Both of these directives are required to make the shadow show
 */
.ui-toolbar {
  position: sticky;
  top: 0;
  padding-right: 0px;
  z-index: 2;
  justify-content: space-between;
  @include mat-elevation.elevation(2);
}

.search-field {
  /*
   * Use a fixed width here because
   * the form field does not work with
   * relative / computed sizes
   */
  width: 450px;
}

.header-icon {
  color: white;
  font-size: 15pt;
}

/**  App content  **/

:host {
  background-color: colors.$background;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;

  /*
  This only targets iOs devices. Note that (just like the line below), this is
  a hacky solution. While it is practically guaranteed that only iOs will have this
  property, it is not guaranteed that iOs will keep this property for ever.
  */
  @supports (-webkit-touch-callout: none) {
    /* mobile viewport bug fix.
      The viewport height on iOs is not necessarily the visible screen size.
      There might be a bar on the top of the screen. The following line
      fixes this, but since this is no official css feature, this line should
      be replaced as soon as a nicer solution exists.
    */

    height: -webkit-fill-available;
  }
}

.sidenav-menu {
  background-color: colors.$background-secondary;
}

.toolbar-spacer {
  margin-top: var(--mat-toolbar-standard-height, 64px);
}

::ng-deep .cdk-overlay-pane.mat-mdc-dialog-panel {
  margin-top: var(--toolbar-height) !important;
}

/**  Main content  **/

mat-sidenav-container {
  background: none;
}

/**
 * reset the styles from the anchor element
 */
.header-title {
  color: white;
  text-decoration: none;
}

/**
 * Remove the right border so that the background color
 * merges into the main element
 */
.mat-drawer-side {
  border-right: 0;
}

.site-logo {
  width: 180px;
  padding: 8px;
  margin: auto;
}

.footer-cell {
  border-top: solid 1px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  display: flex;
  place-content: center;
  place-items: center;
  min-width: fit-content;

  box-sizing: border-box;

  &:not(:last-child) {
    border-right: solid 1px rgba(0, 0, 0, 0.12);
  }
}

.info-icon {
  margin: auto;
  font-size: 20px;
  cursor: pointer;
}

.info-button {
  width: 48px;
  border-right: solid 1px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  overflow: hidden;
}

.justify-content-end {
  justify-content: end;
}