penpot/frontend/resources/styles/main/partials/left-toolbar.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

.left-toolbar {
  background-color: $color-gray-50;
  align-items: center;
  border-right: 1px solid $color-gray-60;
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: 100%;
}

.left-toolbar-options {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;

  li {
    position: relative;
    color: $color-gray-20;
    button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      height: 48px;
      width: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: inherit;

      svg {
        fill: $color-gray-20;
        height: 16px;
        width: 16px;
      }

      &:hover {
        background-color: $color-primary;
        color: $color-gray-50;

        svg {
          fill: $color-gray-50;
        }
      }

      &.selected {
        background-color: $color-gray-60;
        color: $color-primary;

        svg {
          fill: $color-primary;
        }
      }

      &.separator {
        border-top: 1px solid $color-gray-60;
      }
    }
  }

  &.panels {
    margin-top: auto;
  }
}