.tb-expandable-text {
    position: relative;
}

.tb-expandable-text__container {
    position: relative;
    overflow: hidden;
    display: block;
    max-height: 190px;
    transition: 140ms max-height ease-in-out;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: 300ms opacity ease;
        pointer-events: none;
        // It might be tempting to use "transparent" here but iOS does not handle it well.
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .9) 95%);
    }
}

.tb-expandable-text__container.expanded {
    max-height: 4000px;

    &::after {
        opacity: 0;
        z-index: -1;
    }
}

.tb-expandable-text__toggle {
    display: block;
    margin-top: config('margin.4');

    .c-icon {
        font-size: config('textSizes.xl');
        // Adjustment for not visually vertically centered icon.
        top: .3125rem;
    }

    .c-icon--toggle-up {
        display: none;
        // Adjustment for not visually vertically centered icon.
        top: .5rem;
    }

    &[aria-expanded=true] {
        color: config('colors.secondary');

        .c-icon--toggle-up {
            display: inline;
        }

        .c-icon--toggle-down {
            display: none;
        }
    }
}
