body {
    width: 256px;
    margin: 12px 24px 16px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: #7f8c8d;
    -webkit-font-smoothing: anti-aliased;
}
.title {
    font-size: 24px;
    color: #2c3e50;
}
.buttons {
    display: flex;

    > button {

        &.state-on {
            border: 1px solid #e74c3c;
            color: #e74c3c;

            &.is-active,
            &:hover {
                border: 1px solid #e74c3c;
                background: #e74c3c;
                color: #fff;
            }
            &:active {
                border: 1px solid #e74c3c;
                background: darken(#e74c3c, 5%);
                color: #fff;
            }
            &:focus {
                box-shadow: 0 0 0 2px lighten(#e74c3c, 20%);
            }
        }
        &.state-off {
            border: 1px solid #7f8c8d;
            color: #7f8c8d;

            &.is-active,
            &:hover {
                border: 1px solid #7f8c8d;
                background: #7f8c8d;
                color: #fff;
            }
            &:active {
                border: 1px solid #7f8c8d;
                background: darken(#7f8c8d, 5%);
                color: #fff;
            }
            &:focus {
                box-shadow: 0 0 0 2px lighten(#7f8c8d, 20%);
            }
        }
    }
}
button {
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;
    border-radius: 4px;
    border: 0;
    margin-right: 8px;
    padding: 6px 24px;

    &:focus {
        outline: 0;
    }
    &:hover {
        cursor: pointer;
    }
    &.state-save {
        background: #2c3e50;
        color: #fff;
        width: 100%;
        padding: 8px 24px;

        &:active {
            background: darken(#2c3e50, 5%);
        }
        &:focus {
            box-shadow: 0 0 0 2px lighten(#2c3e50, 20%);
        }
    }
}
.sites {
    margin: 16px 0 0;
    box-sizing: border-box;

    p {
        font-size: 14px;
        font-weight: 500;
        margin: 0 0 8px;
    }
    textarea {
        width: 100%;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 700;
        border: 0;
        background: #ecf0f1;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 14px;
        color: #2c3e50;
        margin: 0 0 8px;
        box-sizing: border-box;
        resize: none;
    }
}