.chevron {
    --color: var(--current-highlight);
    --size: 6.8rem;
    width: var(--size);
    height: var(--size);
    margin: 1rem;
    background: url(/assets/svg/corner.svg) var(--size) var(--size);
    background-repeat: no-repeat;
    background-position: 0 0;
    border-radius: 0.9rem;
}

.chevron.tl {
    transform: none;
}

.chevron.tr {
    transform: scaleX(-1);
}

.chevron.br {
    transform: scale(-1);
}

.chevron.bl {
    transform: scaleY(-1);
}

.decorated {
    position: relative;
    padding: 3rem 5rem;
}
.decorated > .chevron {
    position: absolute;
}
.decorated > .chevron.tl {
    top: 0;
    left: 0;
}
.decorated > .chevron.tr {
    top: 0;
    right: 0;
}
.decorated > .chevron.br {
    bottom: 0;
    right: 0;
}
.decorated > .chevron.bl {
    bottom: 0;
    left: 0;
}

.stripes {
    --stripe-height: 0.398rem;
    background: repeating-linear-gradient(
        to bottom,
        var(--current-highlight) 0,
        var(--current-highlight) round(down, var(--stripe-height), 1px),
        transparent round(down, var(--stripe-height), 1px),
        transparent calc(2* var(--stripe-height))
    ) repeat;
}

.dots {
    --dots-color: var(--current-highlight);
    background: radial-gradient(var(--dots-color) 0.12rem, transparent 0.12rem);
    background-size: 0.7rem 0.7rem;
}

.triangle-line {
    display: flex;
    flex-flow: row nowrap;
}

.triangle {
    --size: 3rem;
    --stroke: 4px;
    flex-shrink: 0;
    width: var(--size);
    height: calc(var(--size) * 0.75);
    margin-inline: -0.5rem;
    background-color: var(--highlight);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.triangle.up {
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    -webkit-clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    background-position: 50% 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 15 L10 0 L20 15 Z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 15 L10 0 L20 15 Z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
}
.triangle.down {
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-position: 50% 50%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 0 L10 15 L20 0 Z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 0 L10 15 L20 0 Z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
}
.triangle.up-full {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-position: 0 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 15 L10 0 L20 15 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 15 L10 0 L20 15 Z' fill='white'/%3E%3C/svg%3E");
}
.triangle.down-full {
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-position: 0 50%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 0 L10 15 L20 0 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M0 0 L10 15 L20 0 Z' fill='white'/%3E%3C/svg%3E");
}