rishabhsrao/voxel

@mixin voxel-drawer() {
  box-shadow: 0 0 $voxel-drawer__box-shadow__radius 0 $voxel-drawer__box-shadow__color;
  @include background-image(
    $voxel-drawer__background-image,
    radial-gradient(
      top center,
      100%,
      rgba($voxel-drawer__background-gradient__color--start, $voxel-drawer__background-alpha),
      rgba($voxel-drawer__background-gradient__color--end, $voxel-drawer__background-alpha)
    )
  );
  // scss-lint:disable DuplicateProperty ColorVariable
  background-color: #fff; // Set fallback color for unsupported browsers.
  background-color: rgba(#fff, 0); // Remove fallback color so that the gradient transparency takes effect.
  // scss-lint:enable DuplicateProperty ColorVariable
  background-size: auto;
  border-right-color: $voxel-drawer__border-right-color;
  border-right-style: $voxel-drawer__border-right-style;
  border-right-width: $voxel-drawer__border-right-width;
  font-family: $voxel-drawer__font-family;
  height: 100%;
  left: -($voxel-drawer__width);
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: $voxel-drawer__width;
  z-index: $voxel-drawer__z-index;
}

@mixin voxel-drawer__themes($theme) {
  box-shadow: 0 0 $voxel-drawer__box-shadow__radius 0 map-get(map-get($voxel-color__themes, $theme), $voxel-drawer__box-shadow__color__shade);
  @include background-image(
    $voxel-drawer__background-image,
    radial-gradient(
      top center,
      100%,
      rgba(
        map-get(
          map-get(
            $voxel-color__themes,
            $theme
          ),
          $voxel-drawer__background-gradient__color--start__shade
        ),
        $voxel-drawer__background-alpha
      ),
      rgba(
        map-get(
          map-get(
            $voxel-color__themes,
            $theme
          ),
          $voxel-drawer__background-gradient__color--end__shade
        ),
        $voxel-drawer__background-alpha
      )
    )
  );
  background-size: auto;
  border-right-color: map-get(map-get($voxel-color__themes, $theme), $voxel-drawer__border-right-color__shade);
}

@mixin voxel-drawer--with-transitions() {
  @include transition-duration($voxel-drawer__transition-duration);
  @include transition-property($voxel-drawer__transition-property);
  @include transition-timing-function($voxel-drawer__transition-timing-function);
  @include transition-delay($voxel-drawer__transition-delay);
}

@mixin voxel-drawer--with-transforms() {
  @include transform(translate3d(-($voxel-drawer__width), 0, 0));
  left: 0;
}

@mixin voxel-drawer--active() {
  left: 0;
  opacity: 1;
}

@mixin voxel-drawer--active--with-transforms() {
  @include transform(translate3d(0, 0, 0));
}

@mixin voxel-drawer__toggle() {
  color: $voxel-drawer__toggle__color;
  font-family: sans-serif;
  font-size: $voxel-drawer__toggle__font-size;
  font-weight: bold;
  left: 0;
  padding-bottom: $voxel-drawer__toggle__padding-bottom;
  padding-left: $voxel-drawer__toggle__padding-left;
  padding-right: $voxel-drawer__toggle__padding-right;
  padding-top: $voxel-drawer__toggle__padding-top;
  position: fixed;
  text-decoration: none;
  top: 0;
  z-index: $voxel-drawer__toggle__z-index;
}

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

@mixin voxel-drawer__toggle--with-transitions() {
  @include transition-duration($voxel-drawer__toggle__transition-duration);
  @include transition-property(color, transform);
}

@mixin voxel-drawer__toggle--active() {
  color: $voxel-drawer__toggle__color--active;
}

@mixin voxel-drawer__toggle--active__themes($theme) {
  color: map-get(map-get($voxel-color__themes, $theme), $voxel-drawer__toggle__color--active__shade);
}

@mixin voxel-drawer__toggle--active--with-transforms() {
  @include transform(rotateZ(180deg));
}

@mixin voxel-drawer__title() {
  color: $voxel-drawer__title__color;
  font-size: $voxel-drawer__title__font-size;
  text-decoration: none;
}

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

@mixin voxel-drawer__header() {
  background-color: $voxel-drawer__header__background-color;
  margin-bottom: $voxel-drawer__header__margin-bottom;
  min-height: $voxel-drawer__header__height--min;
  padding-bottom: $voxel-drawer__header__padding-bottom;
  padding-top: $voxel-drawer__header__padding-top;
  position: relative;
  text-align: $voxel-drawer__header__text-align;
}

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

@mixin voxel-drawer__header__themes($theme) {
  background-color: map-get(map-get($voxel-color__themes, $theme), $voxel-drawer__header__background-color__shade);

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