@import 'defaults';

:host {
    display: block;
}

input, button {
    font-size: 24px;
    padding: 5px 10px;
    &:focus {
        outline: none;
    }
}

input {
    border: solid 1px #ddd;
    &:focus {
        border: solid 1px #aaa;
    }

    &:valid {
        background-color: scale-color($main-color, $lightness: 80%);
    }

    &.dirty:invalid {
        background-color: scale-color(red, $lightness: 80%);
    }
}

button {
    border: 0;
    background-color: $main-color;
    color: #555;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    &:active {
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    }

    &:disabled {
        background-color: #ddd;
    }
}