@import './mixins.scss';

//
// Controls - for things like buttons, input, select
//

button,
.button,
[role='button'] {
    appearance: none;

    background: #fff;

    @include neo-brutalist-card;

    transition: all 64ms linear;

    &:hover {
        transform: translate(-1px, -1px);
        box-shadow: 5px 5px 0 0 #222;
    }

    &:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 0 #222;
    }

    padding: 0.25rem 1.5rem;

    text-decoration: none;
    color: #222;

    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;

    cursor: pointer;

    &.primary {
        background: #1e6733;
        color: #f4fef7;

        &:hover {
            background: #2b8b47;
        }
    }

    &.icon {
        padding: 0.25rem;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }
}

input[type='text'] {
    width: 100%;
    height: 2.5rem;

    @include neo-brutalist-card;

    padding: 0 0.25rem;

    &:hover {
        background: #fdfdfd;
    }
}