/* Expanded Text Form Component Styles */

:root {
    /* Amex Primary Color */
    --amexPrimaryColor: #006FCF;
}

.expanded-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #DBDCE3;
    border-radius: 4px;
    width: 100%;
    transition: height 0.3s ease;
    padding: 8px 12px 16px 26px;
}

.expanded-container.reduced {
    height: 143px;
}

.expanded-container.expanded {
    height: auto;
}

.expanded-title{
    font-size: 16px;
    color:#101820;
}

.expanded-text{
    font-size: 16px;
    color:#757575;
    overflow: hidden;
    position: relative;
}

.expanded-text.reduced-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.expand-button, .reduce-button {
    color: #101820;
    font-size: 16px;
    text-decoration: underline;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

/* Amex branding support */
.amex .expand-button,
.amex .reduce-button {
    color: var(--amexPrimaryColor, #006FCF);
}

.amex .expand-button:hover,
.amex .reduce-button:hover {
    color: #0056a3; /* Darker shade of Amex blue on hover */
}

.amex .expand-button:focus,
.amex .reduce-button:focus {
    outline-color: var(--amexPrimaryColor, #006FCF);
}