penpot/frontend/resources/styles/main/partials/sidebar-align-options.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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>

.align-options {
  display: flex;
  border-bottom: solid 1px $color-gray-60;
  height: 40px;

  .align-group {
    padding: 0 $size-1;
    display: flex;
    justify-content: flex-start;
    width: 50%;

    &:not(:last-child) {
      border-right: solid 1px $color-gray-60;
    }
  }

  .align-button {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    margin: 5px 0;
    padding: $size-2 $size-1;
    width: 25%;

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

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

    &.disabled {
      background-color: transparent;
      cursor: default;
      svg {
        fill: $color-gray-40;
      }
    }

    &.selected svg {
      fill: $color-primary;
    }

    &.selected:hover svg {
      fill: $color-white;
    }
  }
}