@import '../../colors';

h3 {
    color: white;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.options {
    margin: 30px auto;

    &.inactive {
        pointer-events: none;
    }

    button {
        border: 3px solid rgba($sea-blue, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        color: white;
        font-size: 1.1rem;
        border-radius: 10px;
        background-color: transparent;
        margin: 15px 0;
        width: 100%;
        padding: 0 15px;

        &.correct {
            background-color: $green;
            border-color: darken($green, 10%);
            font-weight: 500;
        }

        &.wrong {
            background-color: rgba(orange, 0.8);
            border-color: orange;
            font-weight: 500;
        }
    }

    ion-checkbox {
        --background: transparent;
        --border-color: #2ea9f586;
        --border-width: 2px;
        --border-color-checked: white;
        --background-checked: transparent;
        --size: 25px;
        --checkmark-width: 2px;
        --checkmark-color: white;
        pointer-events: none;
    }
}