@import 'colors';
@import 'variables';

$header-height: 120px;
$header-bottom-border: 4px;
$user-width: 196px;
$user-icon-size: 44px;
$user-right-margin: 80px;

.header {
  height: $header-height;

  mat-toolbar {
    height: calc(#{$header-height} - #{$header-bottom-border});
    width: 100%;
    padding: 0 $padding-64;
    justify-content: space-between;
    background: $white;
    box-shadow: 0 2px $header-bottom-border rgba(89, 71, 178, 0.15);

    * {
      font-size: $font-size-16;
      font-weight: 500;
    }

    .links {
      flex-grow: 1;
      display: flex;
      justify-content: space-around;
      max-width: 900px;
    }

    .link {
      color: $charcoal-grey-color;
      text-transform: uppercase;

      &.active {
        color: $dark-violet-color;
      }
    }

    .admin {
      align-items: center;
      display: flex;

      .avatar {
        align-items: center;
        background-color: $latter-grey-color;
        border-radius: 50%;
        display: flex;
        font-size: $font-size-16;
        font-weight: 600;
        height: 48px;
        justify-content: center;
        margin-right: $margin-12;
        width: 48px;
      }

      .name {
        max-width: 144px;
        font-weight: 400;
        white-space: normal;
        line-height: $font-size-16;
        overflow-x: auto;
        text-align: left;
        text-overflow: ellipsis;
      }
    }
  }
}

.content {
  padding: $padding-16 $padding-64;
}
