@use '~@/style/globals';

.EventMiniSummary {
    position: relative;
    padding: 1rem 0.8rem;
    border: 1px solid globals.$text-muted-color;
    border-radius: 8px;
    color: globals.$text-nav-color;
    text-align: center;

    &__not-saved {
        position: absolute;
        color: globals.$text-warning-color;
    }

    &__title {
        font-size: 1.1rem;
        font-weight: 800;
    }

    &__detail,
    &__total {
        margin-top: 0.8rem;
        line-height: 1.4rem;
        text-transform: capitalize;
    }

    &__total {
        color: globals.$text-base-color;
        font-size: 1.4rem;
    }

    &--not-saved {
        border-color: globals.$text-warning-color;
    }

    &--confirmed {
        .fa-check {
            color: globals.$text-success-color;
        }
    }
}
