.myshop button.myshop-button,
.myshop a.myshop-button {
    outline: none;
}

.myshop button.myshop-button.has-focus-keyboard,
.myshop a.myshop-button.has-focus-keyboard,
a.myshop-modal-close-button.has-focus-keyboard {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

.myshop .myshop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: none;
    border-radius: 50px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: 0.3s ease-out;
}

    .myshop .myshop-button:hover,
    .myshop .myshop-button:focus {
        cursor: pointer;
    }

    .myshop .myshop-button.regular {
        height: 48px;
        flex: 0 0 48px;
        padding: 0 30px;
        font-size: 14px;
    }

    .myshop .myshop-button.small {
        height: 30px;
        flex: 0 0 30px;
        padding: 0 20px;
        font-size: 12px;
    }

    .myshop .myshop-button.with-left-icon svg {
        margin-right: 12px;
    }

    .myshop .myshop-button.with-right-icon svg {
        margin-left: 12px;
    }

    .myshop .myshop-button.primary {
        color: var(--primary-button-idle-color);
        fill: var(--primary-button-idle-color);
        background-color: var(--primary-button-idle-background-color);
    }

        .myshop .myshop-button.primary:hover {
            background-color: var(--primary-button-hover-background-color);
        }

    .myshop .myshop-button.secondary {
        color: var(--secondary-button-idle-color);
        fill: var(--secondary-button-idle-color);
        background-color: var(--secondary-button-idle-background-color);
    }

        .myshop .myshop-button.secondary:hover {
            background-color: var(--secondary-button-hover-background-color);
        }

    .myshop .myshop-button.subordinate {
        color: var(--subordinate-button-idle-color);
        fill: var(--subordinate-button-idle-color);
        background-color: var(--subordinate-button-idle-background-color);
        border: 1px solid var(--subordinate-button-idle-border-color);
    }

        .myshop .myshop-button.subordinate:hover {
            border-color: var(--subordinate-button-hover-border-color);
        }

    .myshop .myshop-button.other {
        color: var(--other-button-idle-color);
        fill: var(--other-button-idle-color);
        background-color: var(--other-button-idle-background-color);
    }

.myshop button.myshop-icon-button {
    padding: 0;
    outline: none;
    background: none;
    border: none;
}

.myshop .myshop-icon-button {
    display: inline-flex;
    fill: var(--icon-button-idle-color);
    transition: 0.3s ease-out;
}

    .myshop .myshop-icon-button:hover {
        fill: var(--icon-button-hover-color);
    }

button.myshop-modal-close-button {
    background: none;
    border: none;
    padding: 0;
}

.myshop-modal-close-button {
    display: inline-flex;
    border-radius: 50%;
    overflow: hidden;
}

    .myshop-modal-close-button .ring,
    .myshop-modal-close-button .x {
        transition: 0.3s ease-out;
    }

    .myshop-modal-close-button .ring {
        fill: var(--modal-close-button-ring-idle-color);
    }

    .myshop-modal-close-button .x {
        fill: var(--modal-close-button-x-idle-color);
    }

    .myshop-modal-close-button:hover .ring {
        fill: var(--modal-close-button-ring-hover-color);
    }