@use '~@moda/om';

.SlidingPane {
  position: fixed;
  visibility: hidden;
  width: 100%;
  bottom: -100vh;
  left: 0;
  right: 0;
  transition: all 500ms ease-out;
  background-color: om.color('snow');
  margin-left: 0;

  &--active {
    visibility: visible;
    bottom: 0;
  }

  &__top {
    padding: om.space(3);
    border-bottom: 1px solid om.color(elephant);
    box-shadow: 0px -1px 2px om.color(ink, 0.1);
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2rem;
    cursor: pointer;
  }

  &__content {
    padding: om.space(4);
  }

  &__overlay {
    background-color: om.color(coal, 0.3);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: none;

    &--active {
      display: block;
    }
  }
}