.ark-ui-side-tab-board {
  background-color: #fff;
  border: 1px solid #F0F1F7;
  border-radius: 8px;
  padding: 24px;

  display: grid;
  column-gap: 16px;

  min-height: calc(100vh - 152px);

  transition: .4s;

  box-sizing: border-box;

  &.is-opened {
    grid-template-columns: 240px 1fr;
  }

  &.is-closed {
    grid-template-columns: 48px 1fr;
    
    .ark-ui-side-tab-board-side {
      overflow: hidden;
    }

    .ark-ui-side-tab-board-toggle-action-text {
      opacity: 0;
      transform: scale(50%);
    }

    .ark-ui-side-tab-board-toggle-action-icon {
      transform: rotate(180deg);
    }
  }

  &-side {
    border-right: 1px solid #F6F6FA;

    .ark-ui-tooltip {
      width: 100%;
    }
  }

  &-side-slot {
    min-height: 48px;
  }

  &-toggle-action {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 16px;

    font-size: 14px;

    cursor: pointer;

    transition: background-color .4s;

    &:hover {
      background-color: #F6F6FA;
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 16px;
      right: 16px;
      height: 1px;
      background-color: #F6F6FA;
    }
  }

  &-toggle-action-icon {
    min-width: 16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.97855 11.1464C8.17382 11.3417 8.17382 11.6583 7.97855 11.8536C7.78329 12.0488 7.46671 12.0488 7.27145 11.8536L3.77145 8.35355C3.67768 8.25979 3.625 8.13261 3.625 8C3.625 7.86739 3.67768 7.74022 3.77145 7.64645L7.27145 4.14645C7.46671 3.95118 7.78329 3.95118 7.97855 4.14645C8.17382 4.34171 8.17382 4.65829 7.97855 4.85355L4.83211 8L7.97855 11.1464Z' fill='%23585B69'/%3E%3Cpath d='M12.4786 11.1464C12.6738 11.3417 12.6738 11.6583 12.4786 11.8536C12.2833 12.0488 11.9667 12.0488 11.7714 11.8536L8.27145 8.35355C8.17768 8.25979 8.125 8.13261 8.125 8C8.125 7.86739 8.17768 7.74022 8.27145 7.64645L11.7714 4.14645C11.9667 3.95118 12.2833 3.95118 12.4786 4.14645C12.6738 4.34171 12.6738 4.65829 12.4786 4.85355L9.33211 8L12.4786 11.1464Z' fill='%23585B69'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    transition: transform .4s;
  }

  &-toggle-action-text {
    color: #585B69;

    transition: opacity .4s, transform .4s;
    transform-origin: left;
  }

  &-side-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 48px);
  }
}