/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '../../core/styles/theme';
@use '../../core/styles/animation';
@use '../../core/styles/scrollbar';
@use '../../core/styles/elevation';
@use './variables';

@mixin core-styles() {
  .forge-drawer {
    @include base;
  
    ::slotted([slot='header']) {
      @include header;
    }
  
    ::slotted([slot='footer']) {
      @include footer;
    }
  
    &__content {
      @include content;
    }
  
    &--left {
      @include left;
    }
  
    &--right {
      @include right;

      &.forge-drawer--closing {
        @include closing(right);
      }

      &.forge-drawer--closed {
        @include closed(right);
      }
    }

    &--closing {
      @include closing(left);
    }

    &--closed {
      @include closed(left);
    }
  
    &--no-transition {
      transition: none !important;
    }
  }
}

@mixin host() {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden !important; // Using important to ensure that it overrides the scaffold overflow style
}

@mixin base() {
  
  width: var(--forge-drawer-width, variables.$width);
  background-color: #{theme.variable(surface)};
  border-color: #{theme.variable(outline)};
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transition-property: transform;
  transition-duration: variables.$transition-duration;
  transition-timing-function: #{animation.variable(easing-standard)};
}

@mixin header() {
  grid-row: 1;
}

@mixin content() {
  @include scrollbar.base;

  overflow-x: auto;
  -webkit-overflow-scrolling: 'touch';
  display: flex;
  flex-direction: column;
  grid-row: 2;
}

@mixin footer() {
  grid-row: 3;
}


@mixin left() {
  border-right-width: variables.$border-width;
  border-right-style: solid;
}

@mixin right() {
  border-left-width: variables.$border-width;
  border-left-style: solid;
}

@mixin closed($direction: left) {
  @include closed-direction($direction);

  width: 0;
  border: none;
}

@mixin closing($direction: left) {
  @include closed-direction($direction);

  z-index: #{elevation.z-index-variable(surface)};
  position: absolute;
  top: 0;
  right: 0;
  transition-duration: variables.$transition-duration-close;

}

@mixin closed-direction($direction: left) {
  @if $direction == right {
    transform: translateX(100%);
    right: 0;
    left: auto;
  } @else {
    transform: translateX(-100%);
    left: 0;
  }
}
