@use './mixins' as mix;

.trm {
    .trm-button {
        @include mix.flexRow(10px, center);
        @include mix.font(14px, 20px, 500);
        border-radius: 10px;
        height: 42px;
        outline: 0;
        width: 100%;
        border: none;
        cursor: pointer;

        @include mix.tablet {
            height: 48px;
            @include mix.font(15px, 22px, 500);
        }

        &--primary {
            background: var(--color-primary-500);
            color: white;
            font-weight: 600;

            &:hover, &:focus {
                background: var(--color-primary-600);
            }

            &:active {
                outline: 0;
                background: var(--color-primary-650);
            }

            &:disabled {
                background: var(--color-base-250);
            }
        }

        &--secondary {
            background: var(--color-base-50);

            &:hover, &:focus {
                background: var(--color-base-100);
            }

            &:active {
                background: var(--color-base-150);
            }
        }
    }
}