@import '../../less/_mixins/all.less';

#unlalert {
    // Avoid flash of unstyled content, JS initially positions this off screen
    position: relative !important;
    top: auto !important;
    z-index: 999; // above the logo
    padding: .8em 0;
    .clear-fix;
    background-color: @energetic;

    a {
        color: #fff;
        border-bottom: 1px dotted currentcolor;
    }

    &.show {
        padding-top: 1.777em;
        padding-bottom: 1.777em;
    }

    .unlalert-info {
        max-width: 38em;
    }

    .unlalert-heading {
        margin-bottom: .317rem;
        font-size: .75rem;
    }

    .unlalert-headline {
        font-size: 2.369rem;
        line-height: 1;
        letter-spacing: .01em;
    }

    .unlalert-desc {
        margin-top: .563rem;
        margin-bottom: 0;
    }

    .unlalert-meta {
        display: flex;
    }
}

#unlalert_toggle {
    white-space: nowrap;
    padding: 0;
    border: none;
    line-height: 1.333;
    color: #fff;
    background-color: transparent;

	#unlalert.show & {
        position: absolute;
        top: .75em;
        right: 1em;
        z-index: 1;
	}
}

#unlalert_content {
    display: none;
    position: relative;
    color: #fff;

    #unlalert.show & {
        display: flex;
        flex-flow: row wrap;
    }
}

@media @bp-under480w {

    #unlalert {
        font-size: .9353rem;
    }
}

@media @bp-under640w {

    #unlalert {

        .unlalert-meta {
            flex-direction: column;
        }

        .unlalert-link {
            margin-top: 1em;
        }
    }
}

@media @bp640-959 {

    #unlalert {

        .unlalert-meta {
            flex-direction: row;
        }

        .unlalert-link {
            flex: 1;
            margin-left: 1.777rem;
        }
    }
}

@media @bp-under768w {

    #unlalert_content {
        margin-top: 1em;
    }
}

@media @bp768 {

    #unlalert {
        font-size: .8rem;
    }
}

@media (max-width: 59.99em) {

    #unlalert_content {

        .unlalert-meta {
            margin-top: 1em;
        }
    }
}

@media @bp960 {

    #unlalert {

        .unlalert-info {
            flex: 2;
            margin-right: 1.777rem;
        }

        .unlalert-meta {
            flex: 1;
            flex-direction: column;
        }

        .unlalert-link {
            margin-top: 1em;
        }
    }
}