@import "../../app/vars.less";

@icon-size: 90vh;
@icon-size-compact: 50vh;
@icon-background-color: #fff;
@icon-hover-color: #40a9ff;

@button-margin: 2.5vh; // quarter difference in 100 - @icon-size
@margin: @button-margin;

.tools--compact,
.tools {
  display: flex;
  align-items: center;
  justify-content: start;
  flex: 1;
  border: solid @background-color;
  border-width: 0 0 0 4px;
  padding: 0 2.5vh;
}

.tools .anticon {
  font-size: @icon-size;
  height: @icon-size;
  width: @icon-size;
  color: @primary-color-variant;
  margin: @margin;
  border: 1px solid transparent;
  border-radius: 2px;
  border-color: #d9d9d9;
  background: @background-color;
}

.tools--compact .anticon {
  .tools .anticon;
  font-size: @icon-size-compact;
  height: @icon-size-compact;
  width: @icon-size-compact;
}

.tools--compact .anticon:hover,
.tools .anticon:hover {
  border-color: @icon-hover-color;
  background: @icon-hover-color;
}

.tools__label {
  transform: rotate(-90deg);
  font-weight: bold;
  word-wrap: normal;
  white-space: nowrap;
  line-height: 1rem;
  text-align: center;
  z-index: 1;
  order: -1000;
}

.tools__label.ant-typography {
  color: @background-color;
}

.tools__web-div,
.tools__util-div {
  display: flex;
  align-items: center;
  height: 100%;
}