@import 'projects/fei-components/src/scss/variables.scss';

:host {
  display: inline-block;
  height: 100%;
}

.action-panel {
  position: relative;
  height: 100%;
  width: 24px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  &.open {
    width: 300px;
  }
}

.pull-button {
  position: absolute;
  top: 12px;
  left: -22px;
  z-index: 10;
}

.tabs {
  width: 60px; // tab切り替わり時のため横幅を固定ピクつき防止
  position: absolute;
  top: 56px;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.contents {
  width: 100%;
  height: 100%;
}