ui/artalk-sidebar/src/style/_extends.scss
.atk-slim-scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(86, 86, 86, 0.3);
  }

  &::-webkit-scrollbar-thumb:vertical:hover {
    background: rgba(65, 74, 82, 0.77);
  }

  &::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(41, 47, 53, 0.77);
  }
}

.atk-list-text-actions {
  display: flex;
  flex-direction: column;
  flex: auto;
  padding: 0 35px;
  padding-top: 10px;
  padding-bottom: 0;
  flex-wrap: wrap;
  align-content: flex-start;

  .atk-item {
    position: relative;
    font-size: 17px;
    // max-width: 5em;
    display: inline-flex;
    margin-right: 15px;
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;

    &.atk-green:after {
      position: absolute;
      content: ' ';
      height: 5px;
      width: 100%;
      left: 0;
      bottom: 5px;
      background: rgba(50, 199, 134, 0.39);
    }

    &.atk-yellow:after {
      position: absolute;
      content: ' ';
      height: 5px;
      width: 100%;
      left: 0;
      bottom: 5px;
      background: rgba(255, 203, 0, 39%);
    }
  }
}

.atk-list-btn-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px;

  .atk-item {
    cursor: pointer;
    user-select: none;
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 2px;
    align-items: center;
    justify-content: center;

    &:hover {
      background: var(--at-color-bg-grey);
    }

    &:not(:last-child) {
      margin-right: 15px;
    }

    &.atk-item-close {
      margin-left: 10px;
    }
  }

  .atk-icon::after {
    background-color: var(--at-color-meta);
  }

  .atk-icon-yes::after {
    background-color: var(--at-color-main);
  }
}
