// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "@blueprintjs/icons/lib/scss/variables";
@import "../../common/mixins";
@import "../../common/react-transition";
@import "../../common/variables";

$drawer-margin: ($pt-spacing * 7.5) 0 !default;
$drawer-padding: $pt-spacing * 5 !default;

$drawer-default-size: 50%;

$drawer-background-color: $white !default;
$dark-drawer-background-color: $dark-gray3 !default;

.#{$ns}-drawer {
  background: $drawer-background-color;
  box-shadow: $pt-elevation-shadow-4;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  &:focus {
    outline: 0;
  }

  &.#{$ns}-position-top {
    @include react-transition-phase(
      "#{$ns}-overlay",
      "enter",
      (
        transform: (
          translateY(-100%),
          translateY(0),
        ),
      ),
      $pt-transition-duration * 2,
      $pt-transition-ease,
      $before: "&"
    );
    @include react-transition-phase(
      "#{$ns}-overlay",
      "exit",
      (
        transform: (
          translateY(-100%),
          translateY(0),
        ),
      ),
      $pt-transition-duration,
      $before: "&"
    );
    height: $drawer-default-size;
    left: 0;
    right: 0;

    top: 0;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      border-bottom: 1px solid $pt-high-contrast-mode-border-color;
    }
  }

  &.#{$ns}-position-bottom {
    @include react-transition-phase(
      "#{$ns}-overlay",
      "enter",
      (
        transform: (
          translateY(100%),
          translateY(0),
        ),
      ),
      $pt-transition-duration * 2,
      $pt-transition-ease,
      $before: "&"
    );
    @include react-transition-phase(
      "#{$ns}-overlay",
      "exit",
      (
        transform: (
          translateY(100%),
          translateY(0),
        ),
      ),
      $pt-transition-duration,
      $before: "&"
    );
    bottom: 0;
    height: $drawer-default-size;
    left: 0;

    right: 0;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      border-top: 1px solid $pt-high-contrast-mode-border-color;
    }
  }

  &.#{$ns}-position-left {
    @include react-transition-phase(
      "#{$ns}-overlay",
      "enter",
      (
        transform: (
          translateX(-100%),
          translateX(0),
        ),
      ),
      $pt-transition-duration * 2,
      $pt-transition-ease,
      $before: "&"
    );
    @include react-transition-phase(
      "#{$ns}-overlay",
      "exit",
      (
        transform: (
          translateX(-100%),
          translateX(0),
        ),
      ),
      $pt-transition-duration,
      $before: "&"
    );
    bottom: 0;
    left: 0;

    top: 0;
    width: $drawer-default-size;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      border-right: 1px solid $pt-high-contrast-mode-border-color;
    }
  }

  &.#{$ns}-position-right {
    @include react-transition-phase(
      "#{$ns}-overlay",
      "enter",
      (
        transform: (
          translateX(100%),
          translateX(0),
        ),
      ),
      $pt-transition-duration * 2,
      $pt-transition-ease,
      $before: "&"
    );
    @include react-transition-phase(
      "#{$ns}-overlay",
      "exit",
      (
        transform: (
          translateX(100%),
          translateX(0),
        ),
      ),
      $pt-transition-duration,
      $before: "&"
    );
    bottom: 0;
    right: 0;

    top: 0;
    width: $drawer-default-size;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      border-left: 1px solid $pt-high-contrast-mode-border-color;
    }
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    background: $dark-drawer-background-color;
    box-shadow: $pt-dark-dialog-box-shadow;
    color: $pt-dark-text-color;
  }
}

.#{$ns}-drawer-header {
  align-items: center;
  border-radius: 0;
  box-shadow: 0 1px 0 $pt-divider-black;
  display: flex;
  flex: 0 0 auto;
  min-height: $pt-icon-size-large + $drawer-padding;
  padding: $drawer-padding * 0.25;
  padding-left: $drawer-padding;
  position: relative;

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border-bottom: 1px solid $pt-high-contrast-mode-border-color;
  }

  .#{$ns}-icon-large,
  .#{$ns}-icon {
    color: $pt-icon-color;
    flex: 0 0 auto;
    margin-right: $drawer-padding * 0.5;
  }

  .#{$ns}-heading {
    @include overflow-ellipsis;
    flex: 1 1 auto;
    line-height: inherit;
    margin: 0;

    &:last-child {
      margin-right: $drawer-padding;
    }
  }

  .#{$ns}-dark & {
    box-shadow: 0 1px 0 $pt-dark-divider-black;

    .#{$ns}-icon-large,
    .#{$ns}-icon {
      color: $pt-dark-icon-color;
    }
  }
}

.#{$ns}-drawer-body {
  flex: 1 1 auto;
  line-height: $pt-spacing * 4.5;
  overflow: auto;
}

.#{$ns}-drawer-footer {
  box-shadow: inset 0 1px 0 $pt-divider-black;
  flex: 0 0 auto;
  padding: $drawer-padding * 0.5 $drawer-padding;
  position: relative;

  .#{$ns}-dark & {
    box-shadow: inset 0 1px 0 $pt-dark-divider-black;
  }
}