@import "colors.less";

button,
select,
input[type="button"] {
    min-width: 2em;
    min-height: 2em;
    padding: .4em;
    border-style: none;
    border-radius: @border-radius;
    color: @text;
    background-color: @secondary;
    @media (prefers-color-scheme: dark) {
        color: @text-dark;
        background-color: @secondary-dark;
    }
    &:hover,
    &.pair-sub:hover ~ &.pair-sup {
        background-color: @secondary-hover;
        transition-duration: @transition;
        @media (prefers-color-scheme: dark) {
            background-color: @secondary-hover-dark;
        }
    }
}

.flex-reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}

.buttonpair.flex-reverse button.right,
.buttonpair.flex-reverse button.left {
    border: 1px solid @secondary-hover;
    @media (prefers-color-scheme: dark) {
        border-color: @secondary-hover-dark;
    }
}

.buttonpair.flex-reverse button.right {
  border-radius: 0px 10px 10px 0px;
  border-width: 0 0 0 2px;
}

.buttonpair.flex-reverse button.left {
  border-radius: 10px 0px 0px 10px;
  border-width: 0 2px 0 0;
}