Propose CSS variable to override control icon properties (like size, etc)

[shahrin014]

Can I propose we do the following:

:host {
    display: block;
    position: relative;
    overflow: hidden;
    --dot-background-color: #ffffff;
    --dot-active-extra-item: hidden;
    /* Adding the following variables */
    --dot : {
    };
    --arrow : {
    };
    --controls : {
    };
}

/* further down */
:host::content .paper-carousel_controls {
    position: absolute;
    width: auto;
    top: 50%;
    right: 10px;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
    pointer-events: none
    @apply --controls;
}
:host::content [class*=paper-carousel_controls_arrow] {
    color: var(--dot-background-color);
    pointer-events: auto;
    @apply --arrow;
}

:host::content .paper-carousel_dots {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 1;
    bottom: 10px;
    pointer-events: none
   @apply --dots;
}

Justification: This way we can customize the look and feel of the dots and arrows in the parent component.

Perhaps you have a better suggestion.

[DavidTorrijos]

Hi @shahrin-14 , at this moment we are working on other priorities, but we will take your propose into account in the future. Thank you!