/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiFlyout {
  @include ouiFlyout;
  animation: ouiFlyout $ouiAnimSpeedNormal $ouiAnimSlightResistance;

  // Remove focus ring because of `tabindex=0`
  &:focus {
    outline: none;
  }
}

.ouiFlyout__closeButton {
  background-color: transparentize($ouiColorEmptyShade, .1);
  position: absolute;
  right: $ouiSizeS;
  top: $ouiSizeS;
  z-index: 3;

  &--outside {
    // match dropshadow
    @include ouiBottomShadowLarge;
    right: auto;
    left: 0;
    // Override the hover and focus transitions of buttons
    // sass-lint:disable-block no-important
    transform: translateX(calc(-100% - #{$ouiSizeL})) !important;
    animation: none !important;

    .ouiFlyout--left & {
      left: auto;
      right: 0;
      transform: translateX(calc(100% + #{$ouiSizeL})) !important;
    }
  }
}

.ouiFlyoutBody__banner {
  overflow-x: hidden;
}

/**
 * 1. Calculating the minimum width based on the screen takeover breakpoint
 */
$flyoutSizes: (
  'small': (
    min: round(map-get($ouiBreakpoints, 'm') * .5), /* 1 */
    width: 25vw,
    max: round(map-get($ouiBreakpoints, 's') * .7),
  ),
  'medium': (
    // Calculated for forms plus padding
    min: $ouiFormMaxWidth + ($ouiSizeM * 2),
    width: 50vw,
    max: map-get($ouiBreakpoints, 'm'),
  ),
  'large': (
    min:  round(map-get($ouiBreakpoints, 'm') * .9), /* 1 */
    width: 75vw,
    max: map-get($ouiBreakpoints, 'l'),
  )
);

@each $name, $sizing in $flyoutSizes {
  .ouiFlyout--#{$name} {
    min-width: map-get($sizing, min);
    width: map-get($sizing, width);

    &.ouiFlyout--maxWidth-default {
      max-width: map-get($sizing, max);
    }
  }
}

@each $modifier, $paddingAmount in $ouiFlyoutPaddingModifiers {
  .ouiFlyout--#{$modifier} {

    .ouiFlyoutHeader {
      padding: $paddingAmount $paddingAmount 0;
    }

    .ouiFlyoutHeader--hasBorder {
      padding-bottom: $paddingAmount;
    }

    .ouiFlyoutBody__overflowContent {
      padding: $paddingAmount;
    }

    .ouiFlyoutBody__banner .ouiCallOut {
      padding-left: $paddingAmount;
      padding-right: $paddingAmount;
    }

    .ouiFlyoutFooter {
      @if $paddingAmount == $ouiSizeL {
        padding: ($paddingAmount / 1.5) $paddingAmount;
      } @else if $paddingAmount == $ouiSize {
        padding: ($paddingAmount * .75) $paddingAmount;
      } @else {
        padding: $paddingAmount;
      }
    }
  }
}

@keyframes ouiFlyout {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  75% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/**
 * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
 * 2. If a custom maxWidth is set, we need to override it.
 */
@include ouiBreakpoint('xs', 's') {
  // sass-lint:disable-block no-important
  .ouiFlyout {
    max-width: 90vw !important; /* 1, 2 */
  }

  .ouiFlyout--small {
    min-width: 0;
    width: map-get(map-get($flyoutSizes, 'small'), 'min');
  }

  .ouiFlyout--medium {
    min-width: 0;
    width: map-get(map-get($flyoutSizes, 'medium'), 'min');
  }

  .ouiFlyout--large {
    min-width: 0;
    width: map-get(map-get($flyoutSizes, 'large'), 'min');
  }

  // Pull in close buttons a little
  .ouiFlyout__closeButton--outside {
    // Override the hover and focus transitions of buttons
    // sass-lint:disable-block no-important
    transform: translateX(calc(-100% - #{$ouiSizeXS})) !important;

    .ouiFlyout--left & {
      transform: translateX(calc(100% + #{$ouiSizeXS})) !important;
    }
  }
}

/**
 * Left side flyout (should only be used for navigation)
 */
.ouiFlyout--left {
  border-right: $ouiFlyoutBorder;
  border-left: none;
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
  animation-name: ouiFlyoutLeft;
}

// Specific keyframes so in comes in from the left
@keyframes ouiFlyoutLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  75% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/**
 * Pushed style (inside body)
 */
.ouiFlyout.ouiFlyout--push {
  box-shadow: none;
  clip-path: none;
  animation-duration: 0s; // Don't animate on loading a docked nav
  border-left: $ouiBorderThick;
  z-index: $ouiZHeader - 1; // Make sure the header shadows are above

  &.ouiFlyout--left {
    border-left: none;
    border-right: $ouiBorderThick;
  }
}