.root {
  color: #333;
  font-size: 14px;
  min-width: 200px;

  &.hasTab {
    min-width: 300px;
  }
}

.menu {
  .item {
    display: flex;
    cursor: pointer;
    padding: .75em 1em;
    border-bottom: 1px solid #eee;
    transition: background-color .3s;

    svg {
      width: 1em;
      color: #28b9be;
      margin-right: .5em;
    }
  }

  .item:hover {
    background-color: #eee;
  }
}

.tab {
  .header {
    padding: .75em;
    position: relative;
    text-align: center;
    border-bottom: 1px solid #eee;

    .back {
      top: 0;
      left: 0;
      bottom: 0;
      width: 2em;
      font-size: 1.3em;
      position: absolute;
      transition: background-color .3s;

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

      svg {
        width: 1em;
      }
    }
  }

  .body {
    padding: 1em;
  }
}