@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.gb-cmd,
.special,
.split {
  cursor: pointer;
  width: 125px;
  height: 30px;
  margin-left: 5px;
  border-radius: 2px;
  background-color: $grid_bar_bg;

  &:focus-visible {
    @include focus();
  }

  .icon {
    @include partial-column-center;
    width: 32px;
    height: inherit;

    &:focus-visible {
      @include focus();
    }

    svg {
      width: 16px;
      height: 16px;

      path {
        fill: $grid_command_icon;
      }
    }
  }

  .content {
    @include partial-row-center-start;
    height: inherit;
    width: inherit;

    .con-left {
      @include partial-row-center-start;
      height: inherit;
      width: calc(100% - 24px);

      &:hover {
        background-color: $grid_bar_special_icon_hover_bg;
      }
    }

    .con-left-full {
      width: 100%;
    }

    .gb-cmd-cap {
      @include partial-row-center;
      width: 100%;
      height: 100%;
      text-align: left;
      font-family: $primaryFont;
      font-size: 14px;
      letter-spacing: 0px;
      color: $grid_bar_color;
    }

    .gb-cmd-cap-short {
      width: calc(100% - 24px);
    }
  }

  &.gb-cmd-ic {
    width: 70px;

    .icon {
      width: inherit;
      height: inherit;
    }
  }
}

.special {
  height: 34px;
}

.split {
  .s-icon {
    @include partial-column-center;
    border-top: $grid_bar_special_icon_border;
    background-color: inherit;
    width: 24px;
    height: inherit;

    &:focus-visible {
      @include focus();
    }

    svg {
      width: 12px;
      height: inherit;

      path {
        fill: $grid_bar_special_icon;
      }
    }

    &:hover {
      background-color: $grid_bar_special_icon_hover_bg;

      svg path {
        fill: $grid_bar_special_icon_hover;
      }
    }
  }
}