@use 'sass:list';
@use 'sass:meta';
@use '@material/feature-targeting/functions';
@use '@material/feature-targeting/mixins' as feature-targeting-mixins;
@use '@material/animation/functions' as functions2;
@use '@material/animation/variables' as animation-variables;
@use '@material/rtl/mixins' as rtl-mixins;
@use '@material/typography/mixins' as typography-mixins;
@use '@material/typography/variables' as variables2;
@use '@material/theme/mixins' as theme-mixins;
@use '@material/theme/variables' as theme-variables;
@use '@material/ripple/mixins' as ripple-mixins;
@use '@material/shape/mixins' as shape-mixins;
@use '@material/elevation/mixins' as elevation-mixins;
@use '@material/icon-button' as icon-button-mixins;
@use './variables';

@mixin core-styles($query: functions.all()) {
  $feat-structure: functions.create-target($query, structure);
  $feat-animation: functions.create-target($query, animation);

  // postcss-bem-linter: define drawer
  .mdc-side-sheet {
    @include title-ink-color(variables.$title-ink-color, $query: $query);
    @include border-color(variables.$divider-color, $query: $query);
    @include surface-fill-color(variables.$surface-fill-color, $query: $query);
    @include shape-radius(variables.$shape-radius, $query: $query);
    @include z-index(variables.$z-index, $query: $query);
    @include width(variables.$width, $query: $query);

    @include feature-targeting-mixins.targets($feat-structure) {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      box-sizing: border-box;
      height: 100%;
      /* @noflip */
      border-left-width: 1px;
      /* @noflip */
      border-left-style: solid;
      overflow: hidden;
    }

    @include feature-targeting-mixins.targets($feat-animation) {
      transition-property: transform;
      transition-timing-function: animation-variables.$standard-curve-timing-function;
    }
  }

  .mdc-side-sheet--animate {
    @include feature-targeting-mixins.targets($feat-structure) {
      transform: translateX(100%);
    }
  }

  .mdc-side-sheet--opening {
    @include feature-targeting-mixins.targets($feat-structure) {
      transform: translateX(0);
    }

    @include feature-targeting-mixins.targets($feat-animation) {
      transition-duration: variables.$animation-enter;
    }
  }

  .mdc-side-sheet--closing {
    @include feature-targeting-mixins.targets($feat-structure) {
      transform: translateX(100%);
    }

    @include feature-targeting-mixins.targets($feat-animation) {
      transition-duration: variables.$animation-exit;
    }
  }

  .mdc-side-sheet__header {
    @include feature-targeting-mixins.targets($feat-structure) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      box-sizing: border-box;
      min-height: 64px; // same as $mdc-top-app-bar-row-height
      padding: 0 14px 0 variables.$surface-padding;
    }
  }

  .mdc-side-sheet__title {
    @include typography-mixins.typography(headline6, $query: $query);
    margin: 0;
  }

  .mdc-side-sheet__close-button {
    @include icon-button-mixins.size(36px);
    @include icon-button-mixins.ink-color(text-icon-on-light);
  }

  .mdc-side-sheet__content {
    @include feature-targeting-mixins.targets($feat-structure) {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  // postcss-bem-linter: end
}

@mixin dismissible-core-styles($query: functions.all()) {
  $feat-structure: functions.create-target($query, structure);

  .mdc-side-sheet--dismissible {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include rtl-mixins.reflexive-position(right, 0);

      display: none;
      position: absolute;

      &.mdc-side-sheet--open {
        display: flex;
      }
    }
  }

  .mdc-side-sheet-app-content {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include rtl-mixins.reflexive-box(margin, right, 0);

      position: relative;
    }
  }
}

@mixin modal-core-styles($query: functions.all()) {
  $feat-structure: functions.create-target($query, structure);
  $feat-animation: functions.create-target($query, animation);

  .mdc-side-sheet--modal {
    @include scrim-fill-color(variables.$modal-scrim-color, $query: $query);
    @include elevation-mixins.elevation(
      variables.$modal-elevation,
      $query: $query
    );

    @include feature-targeting-mixins.targets($feat-structure) {
      @include rtl-mixins.reflexive-position(right, 0);

      display: none;
      position: fixed;
    }

    &.mdc-side-sheet--open {
      @include feature-targeting-mixins.targets($feat-structure) {
        display: flex;
      }
    }
  }

  .mdc-side-sheet-scrim {
    @include feature-targeting-mixins.targets($feat-structure) {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: variables.$z-index - 1;
    }

    @include feature-targeting-mixins.targets($feat-animation) {
      transition-property: opacity;
      transition-timing-function: animation-variables.$standard-curve-timing-function;
    }

    .mdc-side-sheet--open + & {
      @include feature-targeting-mixins.targets($feat-structure) {
        display: block;
      }
    }

    .mdc-side-sheet--animate + & {
      @include feature-targeting-mixins.targets($feat-structure) {
        opacity: 0;
      }
    }

    .mdc-side-sheet--opening + & {
      @include feature-targeting-mixins.targets($feat-animation) {
        transition-duration: variables.$animation-enter;
      }

      @include feature-targeting-mixins.targets($feat-structure) {
        opacity: 1;
      }
    }

    .mdc-side-sheet--closing + & {
      @include feature-targeting-mixins.targets($feat-animation) {
        transition-duration: variables.$animation-exit;
      }

      @include feature-targeting-mixins.targets($feat-structure) {
        opacity: 0;
      }
    }
  }
}

@mixin border-color($color, $query: functions.all()) {
  $feat-color: functions.create-target($query, color);
  $value: rgba(theme-variables.prop-value($color), variables.$divider-opacity);

  @include feature-targeting-mixins.targets($feat-color) {
    @include theme-mixins.prop(border-color, $value);
  }
}

@mixin shape-radius($radius, $query: functions.all()) {
  // Check type since $radius may be a custom property Map
  $is-list: meta.type-of($radius) == 'list';
  @if $is-list and list.length($radius) > 2 {
    @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
  } @else if $is-list and list.length($radius) == 2 {
    $radius: 0 list.nth($radius, 1) list.nth($radius, 2) 0;
  } @else {
    $radius: 0 $radius $radius 0;
  }

  @include shape-mixins.radius($radius, $rtl-reflexive: true, $query: $query);
}

@mixin divider-color($color, $query: functions.all()) {
  $value: rgba(theme-variables.prop-value($color), variables.$divider-opacity);

  @include list-mixins.divider-color($value, $query: $query);
}

@mixin title-ink-color($color, $query: functions.all()) {
  $feat-color: functions.create-target($query, color);
  $value: rgba(
    theme-variables.prop-value($color),
    variables.$title-ink-opacity
  );

  .mdc-side-sheet__title {
    @include feature-targeting-mixins.targets($feat-color) {
      @include theme-mixins.prop(color, $value);
    }
  }
}

@mixin fill-color-accessible($color, $query: functions.all()) {
  $accessibleColor: theme-variables.accessible-ink-color($color);

  @include title-ink-color($accessibleColor, $query: $query);
  @include surface-fill-color($color, $query: $query);
}

@mixin surface-fill-color($color, $query: functions.all()) {
  $feat-color: functions.create-target($query, color);
  $value: theme-variables.prop-value($color);

  @include feature-targeting-mixins.targets($feat-color) {
    @include theme-mixins.prop(background-color, $value);
  }
}

@mixin scrim-fill-color($color, $query: functions.all()) {
  $feat-color: functions.create-target($query, color);
  $value: rgba(
    theme-variables.prop-value($color),
    variables.$modal-scrim-opacity
  );

  + .mdc-side-sheet-scrim {
    @include feature-targeting-mixins.targets($feat-color) {
      @include theme-mixins.prop(background-color, $value);
    }
  }
}

@mixin z-index($value, $query: functions.all()) {
  $feat-structure: functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    z-index: $value;
  }
}

@mixin width($width, $query: functions.all()) {
  $feat-structure: functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    @include theme-mixins.property(width, $width);
  }

  &.mdc-side-sheet--open:not(.mdc-side-sheet--closing) ~ .mdc-side-sheet-app-content {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include rtl-mixins.reflexive-box(margin, right, $width);
    }
  }
}