@use 'sass:math';
@use 'sass:list';

* {
    box-sizing: border-box;
}

article {
    border: solid 1px #333333;
    border-radius: 1em;
    margin: 0.5em;
}

div {
    & > p:first-child {
	margin-top: 0;
    }
    & > p:last-child {
	margin-bottom: 0;
    }
}

article.tag {
    padding: 0.5em 2em;
    & > h2 {
	margin: 0 0 0.25em -1em;
    }
}

article.contrib {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas:
	"uname submitted updated status"
	"uname url url url"
	"uname tag tag tag"
	"udesc desc desc desc";
    gap: 1px;
    overflow: hidden;

    & > div {
	padding: 0.5em;
    }
    
    @mixin color-panel {
	background-color: #DDDDFF;
	border: solid 1px #8D8DA6;
	margin: -1px;
    }

    div.contrib-upstream-name {
	grid-area: uname;
	@include color-panel;
	text-align: center;
	padding-top: 1em;
    }
    div.contrib-upstream-desc {
	grid-area: udesc;
	@include color-panel;
    }
    div.contrib-urls {
	grid-area: url;
	padding-bottom: 0;
    }
    div.contrib-tags {
	grid-area: tag;
	padding-top: 0;
    }
    div.contrib-submitted {
	grid-area: submitted;
	@include color-panel;
    }
    div.contrib-updated {
	grid-area: updated;
	@include color-panel;
    }
    div.contrib-status {
	grid-area: status;
	@include color-panel;
    }
    div.contrib-desc {
	grid-area: desc;
    }

    &.closed-contrib   div.contrib-status { background-color: #cf222e; color: white; }
    &.open-contrib     div.contrib-status { background-color: #d3ab3a; color: black; }
    &.merged-contrib   div.contrib-status {
	background: repeating-linear-gradient(315deg, #1f883d, #1f883d 1.0em, #d3ab3a 1.0em, #d3ab3a 1.4em);
	color: white;
        $shadow: [];
        @for $w from 1 through 3 {
	    @for $a from 0 to 24 {
                $shadow: list.append($shadow, #{$w*math.cos($a*15deg)}px #{$w*math.sin($a*15deg)}px #1f883d);
            };
        };
        text-shadow: list.join($shadow, [], $separator: comma, $bracketed: false);
    }
    &.released-contrib div.contrib-status { background-color: #1f883d; color: white; }
}