$flyout-height-padding: 1rem;
$flyout-width-padding: 2rem;
$flyout-padding: $flyout-height-padding $flyout-width-padding;
$flyout-bg: #000 !default;
$flyout-color: #fff !default;
$flyout-title-color: #fff !default;
$flyout-transition: right 2s;

.flyout-FlyoutUI {
  background: $flyout-bg;
  color: $flyout-color;
  padding: $flyout-padding;
  position: absolute;
  right: -100%;
  top: 50%;
  transform: translateY(-50%);
  transition: $flyout-transition;
  z-index: 99;

  &__active {
    display: block;
    right: 0;
  }

  &__title {
    color: $flyout-title-color;
  }

  &__close {
    position: absolute;
    right: $flyout-width-padding;
    top: $flyout-height-padding;
  }
}