@import "../../../themes/ionic.globals";

// Sheet
// --------------------------------------------------

$sheet-width: 100% !default;
$sheet-max-width: 500px !default;

.vm-sheet {
  overflow: hidden;
  
  &.vm-sheet-visible {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $z-index-overlay + $z-index-overlay-sheet;
    display: block;
    width: $sheet-width;
    height: $sheet-width;
  }
  
  &.sheet-direction-bottom {
    .sheet-wrapper {
      top: auto;
      bottom: 0;
    }
    
    // transitioName = 'sheet'
    .sheet-enter-active,
    .sheet-leave-active {
      transform: translateY(0%);
    }
    
    .sheet-enter,
    .sheet-leave-active {
      transform: translateY(100%);
    }
  }
  
  &.sheet-direction-top {
    .sheet-wrapper {
      top: 0;
      bottom: auto;
    }
    
    // transitioName = 'sheet'
    .sheet-enter-active,
    .sheet-leave-active {
      transform: translateY(0%);
    }
    
    .sheet-enter,
    .sheet-leave-active {
      transform: translateY(-100%);
    }
  }
  
  .sheet-wrapper {
    position: absolute;
    right: 0;
    left: 0;
    z-index: $z-index-overlay-wrapper;
    display: block;
    width: $sheet-width;
    max-width: $sheet-max-width;
    margin: auto;
    // added
    transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 400ms;
  }
}