@import '../../scss/nestings';

recent-achmt-details {
    div, span, h1, h2, h3, h4, h5, p {
        @include reset-box-model;
        @include reset-font;
    }

    .earned-ago {
        @include font-weight('normal');
        @include heading-5;
        color: $gray-lighten;
    }

    // TODO dedupe
    .award {
        &-group {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            border-color: lighten($blue, 20%);
            border-style: solid;
            border-radius: 5px;
            border-width: 1px;
            padding: .5em;
            min-width: 70%;
            max-width: 30em;
            display: inline-block;
        }

        &-name {
            @include font-weight('light');
            @include heading-4;
            color: $gray-dark;

            &:before {
                display: inline-block;
                content: '';

                width: 20px;
                height: 20px;

                // consider moving to star-large.svg
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.61958 1.17082C3.73932 0.802296 4.26068 0.802296 4.38042 1.17082L5.03276 3.17852C5.08631 3.34333 5.2399 3.45492 5.41319 3.45492H7.52421C7.9117 3.45492 8.07281 3.95076 7.75932 4.17852L6.05147 5.41935C5.91128 5.52121 5.85261 5.70175 5.90616 5.86656L6.5585 7.87427C6.67824 8.24279 6.25645 8.54924 5.94297 8.32148L4.23511 7.08065C4.09492 6.97879 3.90508 6.97879 3.76489 7.08065L2.05703 8.32148C1.74355 8.54924 1.32176 8.24279 1.4415 7.87426L2.09384 5.86656C2.14739 5.70175 2.08872 5.52121 1.94853 5.41935L0.240677 4.17852C-0.0728089 3.95076 0.0883014 3.45492 0.475791 3.45492H2.58681C2.7601 3.45492 2.91369 3.34333 2.96724 3.17852L3.61958 1.17082Z' fill='%23333333'/%3E%3C/svg%3E%0A");
                background-repeat: no-repeat;
                background-position: 0px 3px;
            }
        }

        &-description {
            @include font-weight('light');
            @include heading-5;
            color: $gray-lighten;
        }

        &-redeemed {
            @include font-weight('light');
            @include heading-5;
            color: $cold-green;
        }

        &-not-redeemed {
            @include font-weight('light');
            @include heading-5;
            color: $blue;
        }
    }
}