$tools-item-width = 32px;
$tools-item-font-size = 1.1rem;


.side-tools-container {
  position: relative;
  transition();

  .tools-item {
    width: $tools-item-width;
    height: $tools-item-width;
    font-size: $tools-item-font-size;
    margin-bottom: 3px;
    color: var(--second-text-color);
    background: var(--background-color);
    cursor: pointer;
    box-shadow: 1px 1px 3px var(--shadow-color);
    border-right: none;
    border-radius: 1px;

    &:hover {
      transition();
      color: var(--background-color);
      background: var(--primary-color);
      box-shadow: 2px 2px 6px var(--shadow-color);
    }

    +keep-tablet() {
      width: $tools-item-width * 0.9;
      height: $tools-item-width * 0.9;
      font-size: $tools-item-font-size * 0.9;
      margin-bottom: 2px;
    }
  }


  .side-tools-list {
    opacity: 0;
    transform: translateX(100%);
    transition();

    .tool-expand-width {
      +keep-tablet() {
        display: none;
      }
    }

    &.show {
      opacity: 1;
      transform: translateX(0);
    }
  }

}