// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------
@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
@import "./../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

// layout styles - define any layout specifications for UI that is contained WITHIN the component
// never define layout that would cause effect on element outside the scope of this component


// Default selector setting mobile-first specs
.dialog {
  top: 0;
  left: unset;

  max-width: 90%;
  height: 100%;
  max-height: unset;

  transform: translateX(100%);
  overflow: visible;

  // open modifier
  &--open {
    transform: translateX(0%);
  }
}

::slotted([slot="content"]) {
  position: relative;
}

:host([left]) {
  .dialog {
    right: unset;
    left: 0;

    transform: translateX(-100%);

    // open modifier
    &--open {
      transform: translateX(0%);
    }
  }
}

:host([sm]),
:host([md]),
:host([lg]) {
  @include auro_breakpoint--md {
    .dialog {
      top: 0%;

      max-height: unset;
    }
  }
  .dialog {
    max-height: 100%;
  }
}

:host([sm][lg]),
:host([md][lg]) {
  @include auro_breakpoint--md {
    .dialog {
      max-height: 100%;
    }
  }
  .dialog {
    max-height: 100%;
  }
}