/* Arrow Right Icon */
.arrow-right {
position: relative;
padding-right: 2em;
display: inline-flex;
align-items: center;
}
.arrow-right::after {
content: "";
display: inline-block;
width: 21px;
height: 21px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
right: 0.2em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Play Icon */
.play-icon {
position: relative;
padding-right: 2.2em;
display: inline-flex;
align-items: center;
}
.play-icon::after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
right: 0.1em;
margin-top: 2px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
scale: 1.1;
}
/* Close Icon */
.close-icon {
position: relative;
padding-right: 2em;
display: inline-flex;
align-items: center;
}
.close-icon.icon-left {
padding-left: 2em;
padding-right: 0;
padding-top: 2px;
}
.close-icon.icon-left::after {
right: auto;
left: 0.2em;
}
.close-icon::after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
right: 0.2em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
button.program-modal-close.mobile.text-b.close-icon.icon-left::after {
color: black;
background-color: black;
}
/* Down Arrow Icon */
.down-arrow-icon {
width: 16px;
height: 16px;
background-image: url("/icons/down-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.5s;
display: inline-block;
filter: invert(1);
}
.down-arrow-icon.rotated {
transform: rotate(180deg);
}
/* Chevron Right Icon */
.chevron-right,
.external-link-a {
position: relative;
padding-right: 2em;
display: inline-flex;
align-items: center;
}
.chevron-right::after {
content: "";
display: inline-block;
width: 21px;
height: 21px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
right: 0.2em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: invert(1);
}
.chevron-right.icon-black::after {
filter: invert(0.25);
}
.external-link-a::after {
content: "";
display: inline-block;
width: 21px;
height: 21px;
background: none;
mask: url('data:image/svg+xml;utf8,')
no-repeat center center;
-webkit-mask: url('data:image/svg+xml;utf8, ')
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
right: 0em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Chevron Left Icon (Left) */
.chevron-left {
position: relative;
padding-left: 2rem;
display: inline-flex;
align-items: center;
}
.chevron-left::before {
content: "";
display: inline-block;
width: 21px;
height: 21px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
left: -0.5rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Calendar Icon (Left) */
.calendar-icon {
position: relative;
padding-left: 2rem;
display: inline-flex;
align-items: center;
}
.calendar-icon::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Clock Icon (Left) */
.clock-icon {
position: relative;
padding-left: 2rem;
display: inline-flex;
align-items: center;
}
.clock-icon::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Venue Icon (Left) */
.venue-icon {
position: relative;
padding-left: 2rem;
display: inline-flex;
align-items: center;
}
.venue-icon::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Download Icon (Right) */
.download-icon {
position: relative;
padding-right: 2em;
display: inline-flex;
align-items: center;
}
.download-icon::after {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background: none;
mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
-webkit-mask: url("data:image/svg+xml;utf8,")
no-repeat center center;
background-color: currentColor;
background-size: contain;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}