/* .smart-power-button */

.smart-power-button {
    padding: 0px;
    border-radius: 100%;
    display: inline-block;
    width: var(--smart-power-button-default-width);
    height: var(--smart-power-button-default-width);
}

    .smart-power-button:focus {
        outline: none;
    }

    .smart-power-button .smart-input {
        border-radius: 100%;
    }

    .smart-power-button .smart-input,
    .smart-power-button:focus .smart-input {
        outline: none;
    }

    .smart-power-button .smart-container,
    :host(smart-power-button) .smart-container {
        cursor: pointer;
        height: 100%;
        position: relative;
        display: flex;
    }

    .smart-power-button[disabled] .smart-container,
    .smart-power-button[disabled] .smart-container {
        cursor: initial;
    }

    .smart-power-button .smart-input {
        width: 100%;
        height: 100%;
        min-width: var(--smart-power-button-default-width);
        min-height: var(--smart-power-button-default-width);
        background-color: var(--smart-background);
        border-style: solid;
        box-sizing: border-box;
        border-width: var(--smart-border-width);
        border-color: var(--smart-border);
        display: block;
        position: relative;
        overflow: hidden;
    }

    .smart-power-button:focus .smart-input {
        border: var(--smart-border-width) solid var(--smart-button-border);
        background: var(--smart-button-background);
        color: var(--smart-button-color);
    }

    .smart-power-button:hover .smart-input {
        border: var(--smart-border-width) solid var(--smart-button-border-hover);
        background: var(--smart-button-background-hover);
        color: var(--smart-button-color-hover);
        transition: background-color 100ms linear;
    }

    .smart-power-button:active .smart-input,
    smart-power-button.active .smart-input {
        border: var(--smart-border-width) solid var(--smart-button-border-active);
        background: var(--smart-button-background-active);
        color: var(--smart-button-color-active);
        transition: background-color 100ms linear;
    }

    .smart-power-button .smart-input {
        background-color: var(--smart-background);
    }

    .smart-power-button[checked] .smart-input {
        background-color: var(--smart-primary);
        color: var(--smart-primary);
    }

smart-power-button.raised {
    box-shadow: var(--smart-elevation-2);
}

.smart-power-button .smart-input:after {
    content: '\e805';
    width: 100%;
    height: 100%;
    font-family: "smart-icons";
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    display: inline-block;
    text-decoration: inherit;
    font-variant: normal;
    text-transform: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.smart-power-button[checked] .smart-input:after {
    color: white;
}

.smart-power-button .smart-animation {
    pointer-events: none;
}

.smart-power-button[readonly]:active .smart-input,
.smart-power-button[readonly].active .smart-input,
.smart-power-button[readonly]:hover .smart-input {
    color: initial;
    border: var(--smart-border-width) solid var(--smart-button-border);
    background: var(--smart-button-background);
    transition: none;
}

smart-power-button[right-to-left] > .smart-container > .smart-input {
    direction: rtl;
}