.sheet-container {
  .sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f8f8f8;
    padding: 32px;
    overflow: auto;
    display: flex;
    flex-flow: column;

    + .sheet {
      box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.20);
    }

    .sheet-header {
      position: relative;
      margin-bottom: 22px;

      h4, input {
        border-bottom: 1px solid #cdd7e3;
        padding: 8px 30px 8px 1px;
      }

      input {
        font-size: 18px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #cdd7e3;
        color: #4a4a4a;
        width: 100%;

        &:focus {
          outline: none;
          border-bottom-color: @brand-color;
        }
      }

      input[type=text], .Dropdown-button {
        border-color: @hr-color;
      }
    }

    .sheet-body {
      flex: 1;
      position: relative;
    }

    .back-from-sheet {
      position: absolute;
      left: 0;
      top: 7px;
      cursor: pointer;

      svg {
        display: block;
        fill: #c3cfd7;
      }

      &:hover svg {
        fill: #4a4a4a;
      }

      + h4, + div > input {
        padding: 8px 30px 8px 31px;
      }
    }

    &-enter {
      right: -60px;
      opacity: 0;
      z-index: 2;
      &-active {
        transition: all 500ms;
        transition-timing-function: cubic-bezier(0.025, 1.125, 0.100, 0.970);
        right: 0;
        opacity: 1;
      }
      // when another entering sheet is present, don't scroll it
      + .sheet-leave-active {
        margin-left: 0;
        left: auto;
        opacity: 1;
        box-shadow: -0 0px 0 rgba(0, 0, 0, 0.00);
      }
    }
    &-leave {
      right: 0;
      opacity: 1;
      z-index: 1;
      &-active {
        transition: all 200ms;
        transition-timing-function: cubic-bezier(0.805, 0.050, 0.955, 0.290); // very slow leaving
        right: -32px;
        opacity: 0;
      }
    }
  }
}