@use '@linzjs/lui/dist/scss/Foundation/Variables/ColorVars' as lui;

.RibbonButton {
  box-sizing: border-box;

  img {
    max-width: 100%;
  }

  position: relative;
  background-color: transparent;
  padding: 4px;
  margin: 2px;
  fill: lui.$sea;
  color: lui.$sea;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  border-radius: 5px;

  &:hover {
    background-color: lui.$polar;
  }

  &:disabled,
  .RibbonButton-disabled {
    cursor: not-allowed;
    background-color: lui.$disabled-bg-color;
    fill: lui.$fuscous;

    svg * {
      fill: lui.$fuscous;
    }
  }

  span.LuiIcon {
    display: block;
    margin: auto;
  }
}

.RibbonButtonProcessing {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.RibbonButtonSkeleton {
  padding: 4px;
  margin: 0;
  line-height: 1px;

  > div {
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
  }
}

.RibbonButton-selected,
.RibbonButton:has(+ *:popover-open) {
  cursor: pointer;
  color: lui.$white !important;
  background-color: lui.$sea !important;
  box-shadow: inset 0 2px 4px rgb(41 92 130);

  svg path {
    color: lui.$white !important;
    fill: lui.$white !important;
  }
}

%RibbonButton-Group {
  background-color: white;
  border-radius: 5px;
  padding: 0;
  align-items: center;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  display: inline-flex;
}

.RibbonButtonContent {
  @extend %RibbonButton-Group;
}

.RibbonButton-separator {
  background-color: lui.$grey-10;
}

.RibbonButton-verticalGroup {
  @extend %RibbonButton-Group;
  flex-direction: column;

  .RibbonButton-separator {
    margin-top: 1px;
    margin-bottom: 1px;
    height: 2px;
    width: 44px;
  }
}

.RibbonButton-horizontalGroup {
  @extend %RibbonButton-Group;
  flex-direction: row;

  .RibbonButton-separator {
    margin-left: 1px;
    margin-right: 1px;
    height: 44px;
    width: 2px;
  }
}

.RibbonSliderMenu[popover] {
  margin: 0;
  border: 0;
  inset: auto;
  background: transparent;
  position: fixed;
}

.RibbonSliderMenu:popover-open {
  display: flex;
  flex-direction: row;
}

$RibbonSliderMenu-buttonMargin: 2px;
$RibbonSliderMenu-gap: 6px;
$RibbonSliderMenu-buttonHalfHeight: 20px;

.RibbonSliderMenu-right,
.RibbonSliderMenu-right-down {
  translate: ($RibbonSliderMenu-buttonMargin) (-$RibbonSliderMenu-gap);
}

.RibbonSliderMenu-right-center {
  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-buttonHalfHeight);
}

.RibbonSliderMenu-left-center {
  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-buttonHalfHeight);
}

.RibbonSliderMenu-left,
.RibbonSliderMenu-left-down {
  translate: (-$RibbonSliderMenu-buttonMargin) (-$RibbonSliderMenu-gap);
}

.RibbonSliderMenu-right-up {
  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-gap);
}

.RibbonSliderMenu-left-up {
  translate: (-$RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-gap);
}

.RibbonSliderMenu-up,
.RibbonSliderMenu-up-right {
  translate: (-$RibbonSliderMenu-gap) (-$RibbonSliderMenu-buttonMargin);
}

.RibbonSliderMenu-down-left {
  translate: ($RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
}

.RibbonSliderMenu-down,
.RibbonSliderMenu-down-right {
  translate: (-$RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
}

.RibbonSliderMenu-down-left {
  translate: ($RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
}