// BG-COLORS
@each $color, $shades in $eui-base-tokens-colors {
    @each $shade, $value in $shades {
        .eui-showcase-bg-color-#{$color + '-' + $shade}::after {
            content: "#{$value}";
        }
    }
}

// FONT-SIZES
@each $font-size, $value in $eui-base-tokens-font-sizes {
    .eui-showcase-font-size-#{$font-size}::after {
        content: "#{$value}";
    }
}

@each $size, $value in $eui-base-tokens-spacings {
    .eui-showcase-spacing-size-#{$size}::after {
        content: "#{$value}";
    }
}

.eui-showcase-shadows {
    td {
        display: table-cell;
        vertical-align: middle !important;
    }

    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--eui-base-color-white);
        width: var(--eui-base-spacing-2xl);
        height: var(--eui-base-spacing-2xl);
        margin: var(--eui-base-spacing-xl);
    }
}

.eui-showcase-download {
    display: inline-flex;
    align-items: center;
    padding: var(--eui-base-spacing-m);
    border: 1px solid var(--eui-base-color-grey-25);
    background-color: var(--eui-base-color-white);

    &__icon {
        width: var(--eui-base-spacing-xl);
        margin-right: var(--eui-spacing-s);
    }

    &__title {
        font: var(--eui-base-font-m);
        font-weight: bold;
    }

    &__subtitle {
        font: var(--eui-base-font-s);
        color: var(--eui-base-color-grey-75);
        margin-top: var(--eui-spacing-2xs);
    }
}
