@import "template.scss";

$width: 700px;
$iconSize: 150px;

.wrapper {
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.container {
  width: $width;
  min-height: 450px;
  transition: 200ms transform ease-out;
  position: relative;
  right: -550px;
}

.isVisible {
 transform: translateX(-550px);
}

.icon {
  position: absolute;
  height: $iconSize;
  width: $iconSize;
  border-radius: 50%;
  background-color: $shade1;
  top: calc(50% - $iconSize/2);
}

.content {
  position: absolute;
  border-top-left-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
  background-color: $shade1;
  left: calc($iconSize/2);
  padding-left: calc($iconSize/2);
  min-height: 450px;
  width: $width;
  color: $white;
}

.padding {
  width: 400px;
  padding: 30px 0;
}

@media screen and (max-width: $width) {
  .icon {
    display: none;
  }

  .padding {
    width: 100%;
  }

  .container {
    right: 0;
    width: 100%;
  }

  .content {
    border-radius: 0;
    width: auto;
    position: relative;
    left: 0;
    padding: 0 20px;
  }
}