spinbutton {
    @extend %entry;

    button.image-button:active {
        background: rgba(black, 0.05);
        color: #{'@selected_fg_color'};

        @if $color-scheme == "dark" {
            background: rgba(black, 0.15);
        }
    }

    &.horizontal {
        button {
            padding: rem(4px);

            &:dir(ltr) {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }

            &:dir(rtl) {
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
            }

            &.down {
                border-color: rgba(black, 0.1);
                border-radius: 0;
                border-style: solid;
                border-width: 0 1px;
            }
        }

        text {
            margin: 0 rem(6px);
        }
    }

    &.vertical {
        button {
            &.down {
                border-top: 1px solid rgba(black, 0.1);
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            &.up {
                border-bottom: 1px solid rgba(black, 0.1);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        text {
            margin: rem(6px) 0;
        }
    }
}
