/** Format Text - Show more styles. */
/** Styles of elements inside the directive should be placed in format-text.scss */
@import "~theme/globals";

:root {
    --background: var(--background, #{$ion-item-background});
    --background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
    --viewer-icon-background: rgba(255, 255, 255, .5);
}

:root body.dark {
    --background: var(--background, #{$ion-item-background-dark});
    --background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
    --viewer-icon-background: rgba(0, 0, 0, .5);
}

core-format-text {
    user-select: text;
    word-break: break-word;
    word-wrap: break-word;

    &[maxHeight],
    &[ng-reflect-max-height] {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;

        /* Force display inline */
        &.inline {
            display: inline-block;
            width: auto;
        }

        // This is to allow clicks in radio/checkbox content.
        &.core-text-formatted {
            cursor: pointer;
            pointer-events: auto;

            .core-show-more {
                display: none;
            }

            &:not(.core-shortened) {
                max-height: none !important;
            }

            &.core-shortened {
                overflow: hidden;
                min-height: 50px;

                .core-show-more {
                    text-transform: none;
                    text-align: end;
                    font-size: 14px;
                    display: block;
                    position: absolute;
                    @include position(null, 0, 0, null);
                    z-index: 7;
                    background-color: var(--background);
                    color: var(--text-color);
                    @include padding(null, null, null, 10px);
                    margin: 0;
                }

                &:before {
                    content: '';
                    height: 100%;
                    position: absolute;
                    @include position(null, 0, 0, 0);
                    background: -moz-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
                    background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(var(--background-gradient-rgb), 0)), color-stop(calc(100% - 15px), rgba(var(--background-gradient-rgb), 1)));
                    background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
                    background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
                    z-index: 6;
                }
            }
        }

        &.core-expand-in-fullview {
            cursor: pointer;

            .core-show-more {
                @include push-arrow-color(626262, true);
                @include padding-horizontal(null, 5px);
                @include background-position(end, 5px, center);

                background-repeat: no-repeat;
                background-size: 14px 14px;

                @include darkmode() {
                    @include push-arrow-color(ffffff, true);
                }
            }
        }
    }

    @if ($core-format-text-never-shorten) {
        &[maxHeight],
        &[ng-reflect-max-height] {
            &.core-text-formatted.core-shortened {
                max-height: none !important;

                .core-show-more {
                    display: none !important;
                }

                &:before {
                    display: none !important;
                }
            }
        }
    }

    .core-adapted-img-container {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .core-image-viewer-icon {
        position: absolute;
        @include position(null, 10px, 10px, null);
        color: var(--black);
        border-radius: 5px;
        background-color: var(--viewer-icon-background);
        display: flex;

        width: var(--a11y-min-target-size);
        height: var(--a11y-min-target-size);
        max-width: var(--a11y-min-target-size);
        font-size: 24px;

        ion-icon {
            flex: 1;
            align-self: center;
        }

        &:hover {
            opacity: .7;
        }
    }
}