theme/assets/sass/components/_pen.scss

@use '/assets/sass/protocol/includes/lib' as *;

/* stylelint-disable selector-class-pattern */

.Pen {
    background-color: $color-marketing-gray-10;
}

.Pen-header {
    display: block;
    max-height: none;

    @media #{$mq-md} {
        display: flex;
    }
}

.Pen-title {
    @include text-title-xs;
    color: $title-text-color;
    font-family: $title-font-family;
    margin-bottom: 0.5em;

    @media #{$mq-md} {
        margin-bottom: 0;
    }

    @supports (--css: variables) {
        color: var(--title-text-color);
        font-family: var(--title-font-family);
    }
}

.Pen-previewLink {
    &:link,
    &:visited,
    &:hover,
    &:active {
        color: $title-text-color;

        @supports (--css: variables) {
            color: var(--title-text-color);
        }
    }

    svg {
        fill: currentColor;
        vertical-align: bottom;
    }
}

.Pen-previewButton {
    @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
    @include text-body-sm;
    color: $link-color;
    font-family: $body-font-family;
    font-weight: bold;

    &:hover,
    &:active {
        color: $link-color-hover;
    }

    @supports (--css: variables) {
        color: var(--link-color);
        font-family: var(--body-font-family);

        &:hover,
        &:active {
            color: var(--link-color-hover);
        }
    }
}

.Pen-utils {
    display: flex;
    margin-inline-start: auto;
    min-width: 20vw;
}

.Pen-bidi-controls {
    padding: 0 $spacing-md;

    label {
        display: inline-block;
        padding: 0 $spacing-xs;
    }

    abbr {
        text-decoration: none;
    }

    @media #{$mq-md} {
        padding: 0 $spacing-md;
    }
}