rishabhsrao/voxel

@mixin voxel-header() {
  background: $voxel-header__background-color;
  border-bottom: $voxel-header__border-bottom-width $voxel-header__border-bottom-style $voxel-header__border-bottom-color;
  margin-bottom: $voxel-header__margin-bottom;
  min-height: $voxel-header__height--min;
  padding-bottom: $voxel-header__padding-bottom;
  padding-top: $voxel-header__padding-top;
  position: relative;
  text-align: center;

  @media (min-width: $voxel-scaffolding__screen--s--min) {
    text-align: initial;
  }
}

@mixin voxel-header--with-transforms() {
  &::before {
    @include voxel-circle-shadow(
      $voxel-header__box-shadow__color,
      $voxel-header__box-shadow__radius,
      $voxel-header__box-shadow__height,
      $voxel-header__box-shadow__width
    );
  }
}

@mixin voxel-header__themes($theme) {
  border-bottom: $voxel-header__border-bottom-width $voxel-header__border-bottom-style map-get(map-get($voxel-color__themes, $theme), $voxel-header__border-bottom-color__shade);

  &::before {
    box-shadow: map-get(map-get($voxel-color__themes, $theme), $voxel-header__box-shadow__color__shade) 0 0 $voxel-header__box-shadow__radius 0;
  }
}

@mixin voxel-header__title() {
  color: $voxel-header__title__color;
  font-family: $voxel-header__title__font-family;
  font-size: $voxel-header__title__font-size;
  text-decoration: none;
}

@mixin voxel-header__title__themes($theme) {
  color: map-get(map-get($voxel-color__themes, $theme), $voxel-header__title__color__shade);
}

@mixin voxel-header__title--with-transitions() {
  @include transition-duration($voxel-header__title__transition-duration);
  @include transition-property($voxel-header__title__transition-property);
  @include transition-timing-function($voxel-header__title__transition-duration);
}

@mixin voxel-header__title--inactive--with-filters() {
  @include filter(blur($voxel-layout__page__blur));
}

@mixin voxel-header__title__sub() {
  color: $voxel-header__title__sub__color;
  display: none;
  font-size: $voxel-header__title__sub__font-size;
  margin-left: $voxel-header__title__sub__margin-left;

  @media (min-width: $voxel-scaffolding__screen--s--min) {
    display: initial;
  }
}

@mixin voxel-header__title__sub__themes($theme) {
  color: map-get(map-get($voxel-color__themes, $theme), $voxel-header__title__sub__color__shade);
}