@import '../styles/_variables.scss';

.main {
    width: 100%;
}

.expandable-link-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;
    padding-block-start: 5px;
    padding-inline-end: 0;
    padding-block-end: 5px;
    padding-inline-start: 0;
    text-decoration: none !important;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    color: $font-dark-gray;
    text-align: center;
    .arrows & {
        font-size: 15px;
        font-family: $duda-title-font;
        font-weight: 300;
    }
    .radio & {
        font-size: 14px;
        text-align: left;
    }
    .radio.isOpen & {
        padding-bottom: 0;
    }

    .radioButton {
        margin-inline-end: 10px;
    }

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

.hidden-content-wrapper {
    overflow: hidden;
    .has-transition & {
        transition: height 0.2s ease-in-out;
    }

    .isOpen.afterOpen > & {
        overflow: visible;
    }
}

.expandable-icon {
    margin-inline-start: 6px;
    &.arrowToRight {
        position: absolute;
        right: 0;

        [dir='rtl'] & {
            left: 0;
            right: auto;
        }
    }
    top: 0;
    font-size: 9px;
    color: $clickable-item;
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
    .isOpen > .expandable-link-wrapper > * > & {
        transform: rotate(180deg);
    }
}