// adapted from https://shhdharmen.github.io/keyboard-css/

.physical_button
{
    display: inline-flex;

    // align-items: flex-start;
    // appearance: button;
    // backface-visibility: hidden;
    // background-color: rgb(77, 51, 51);
    border-color: rgb(230, 230, 230);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    // border-image-outset: 0;
    // border-image-repeat: stretch;
    // border-image-slice: 100%;
    // border-image-source: none;
    // border-image-width: 1;
    box-shadow: rgb(217, 217, 217) 0px 0px 0px 0px, rgb(217, 217, 217) 0px 0px 0px 0px, rgb(217, 217, 217) 0px 1px 0px 0px, rgb(217, 217, 217) 0px 2px 0px 0px, rgb(217, 217, 217) 0px 3px 0px 0px, rgb(173, 181, 189) 2px 1.5px 4px 0px, rgb(173, 181, 189) 0px -1px 1.5px 0px;
    // box-sizing: border-box;
    color: rgb(52, 58, 64);
    cursor: default;
    // font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    // font-size: 14px;
    // font-stretch: 100%;
    // font-style: normal;
    // font-variant-caps: normal;
    // font-variant-east-asian: normal;
    // font-variant-ligatures: normal;
    // font-variant-numeric: normal;
    // font-weight: 400;
    // height: 31px;
    // letter-spacing: normal;
    line-height: 21px;
    margin-bottom: 8.5px;
    margin-left: 5.5px;
    margin-right: 5.5px;
    margin-top: 5.5px;
    // overflow-x: visible;
    // overflow-y: visible;
    padding: 4px 8px;
    // text-align: left;
    // text-indent: 0px;
    // text-rendering: auto;
    // text-shadow: none;
    // text-size-adjust: 100%;
    // text-transform: none;
    // transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 5, 1);
    transform-style: preserve-3d;
    // transition-delay: 0s;
    // transition-duration: 0.25s;
    // transition-property: all;
    // transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
    // white-space: pre;
    // word-spacing: 0px;
    // writing-mode: horizontal-tb;
    // -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    // -webkit-border-image: none;

    &::after
    {
        border-color: rgb(204, 204, 204);
        border-radius: 6px;
        border-style: solid;
        border-width: 1.5px;
        bottom: -7px;
        box-sizing: content-box;
        content: "";
        display: block;
        height: 34px;
        left: -4px;
        position: absolute;
        right: -4px;
        top: -1px;
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -3, 1);
        transform-style: preserve-3d;
    }
}


.physical_action
{
    background-color: #555;
    color: white;
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-flex;
}


.shortcut_plus
{
    display: inline-flex;
    padding: 2px;
}
