$tab-active-icon: material-icons-content(map-get($material-icons-codepoints, 'radio_button_checked'));
$tab-inactive-icon: material-icons-content(map-get($material-icons-codepoints, 'radio_button_unchecked'));
$tab-readonly-icon: material-icons-content(map-get($material-icons-codepoints, 'not_interested'));

@mixin is-active {
    border-left: 2px solid $gtx-tabs-active-border-color;
    border-right: 1px solid white;
    margin-right: -1px;
}

@mixin inline-ellipsis-text {
    overflow: hidden;
    max-width: 100%;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin status-icon {
    content: $tab-active-icon;
    position: absolute;
    left: -9px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 13px;
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    display: block;
    line-height: 0.8;
    background: white;
    border-radius: 50%;
    color: $gtx-color-mid-gray;
    transition: color 0.2s;
}

gtx-grouped-tabs {
    width: 100%;
    display: block;

    .grouped-tabs {
        width: 25%;
        float: left;
        margin-right: 15px;

        gtx-tab-pane > .tab-content:not(.is-active) {
            display: none;
        }

        .collapsible {
            border: none;
            box-shadow: none;
            margin: 0;
            background: white;

            & > li {
                background: white;
                // text-transform: uppercase;
                border-top: 1px solid $gtx-color-light-gray;
                margin-bottom: 0;
                position: relative;
                z-index: 1;

                &:last-child {
                    margin-bottom: 0;
                    border-bottom: 1px solid $gtx-color-light-gray;
                }

                icon[left] {
                    float: left;
                    margin-right: 8px;
                    font-size: $gtx-font-size-regular;
                }
            }

            .tab-link {
                @include noselect;
                cursor: pointer;
                // text-transform: uppercase;
                color: $gtx-color-dark-gray;
                transition: border-left 0.3s, color 0.2s;
                border-right: 1px solid $gtx-color-light-gray;
                vertical-align: middle;
                position: relative;
    
                > a {
                    @include inline-ellipsis-text;
                    display: flex;
                    align-items: center;
    
                    &, &:link, &:visited {
                        color: inherit;
                    }
                }
    
                &.disabled > a {
                    cursor: default;
                }

                &.disabled {
                    background: $gtx-color-very-light-gray;
                    color: $gtx-color-mid-gray;
                }

                &.readonly > a {
                    font-style: italic;
                }

                &.statusIcon:before {
                    @include status-icon;
                }

                &.statusIcon.inactive:before {
                    content: $tab-inactive-icon;
                }

                &.statusIcon.is-active:before {
                    color: $gtx-tabs-active-border-color;
                }

                &.statusIcon.readonly:after {
                    content: '';
                    position: absolute;
                    width: 12px;
                    top: 18px;
                    left: -7px;
                    z-index: 1;
                    border-top: 1.5px solid $gtx-color-mid-gray;
                    transform: rotate(45deg);
                    transition: border-color 0.2s;
                }

                &.statusIcon.readonly.is-active:after {
                    border-top-color: $gtx-tabs-active-border-color;
                }

                &.statusIcon.readonly.inactive:before {
                    content: $tab-readonly-icon;
                    background: white;
                }

                &.statusIcon.readonly.inactive:after {
                    content: none;
                } 
            }

            & > li.tab-link {
                cursor: pointer;
                line-height: 1.5;
                padding: 0.3rem;
                padding-left: 1rem;
                border-left: 2px solid $gtx-color-light-gray;
    
                &:hover {
                    color: $gtx-color-off-black;
                    background: #eef7fd;
                }
    
                &.is-active {
                    @include is-active;
                }
            }

            & > li.tab-group {
                border-left: 2px solid $gtx-color-light-gray;
    
                .collapsible-header {
                    border: none;
                    padding: 0.3rem 1rem;
                    color: $gtx-color-dark-gray;
                    border-right: 1px solid $gtx-color-light-gray;
                    font-size: $gtx-font-size-small;
                    @include inline-ellipsis-text;
                    @include noselect;

                    &:hover {
                        color: $gtx-color-off-black;
                    }
                }

                .collapsible-body {
                    display: block;
                    visibility: hidden;
                    opacity: 0;
                    transition: visibility 0s ease 0.15s, opacity 0.10s ease-out 0.05s, max-height 0.15s ease-out;
                    padding: 0;
                    border: none;
                    z-index: 0;
                    position: relative;
                    overflow: hidden;

                    & > ul > li {
                        padding: 0.3rem 1rem;
                        padding-right: 0;
                        margin: 0;
                        margin-left: 1rem;
                        border-left: 2px solid $gtx-color-light-gray;
                        border-top: 1px solid $gtx-color-light-gray;
                        cursor: pointer;
                        background: white;

                        &.disabled {
                            background: $gtx-color-very-light-gray;
                        }

                        &:hover {
                            color: $gtx-color-off-black;
                        }

                        &.is-active {
                            @include is-active;
                        }

                        a span {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
    
                &.is-active {
                    transition: border-left-color 0.2s;
                    border-left-color: rgba(0, 150, 220, 0.49);
                }

                &:hover {
                    .collapsible-body,
                    .collapsible-header {
                        background: #eef7fd;
                    }
                }
    
                &.expanded {
                    .collapsible-body {
                        visibility: visible;
                        opacity: 1;
                        transition: visibility 0s, opacity 0.15s ease-in 0.10s, max-height 0.25s ease-in;
                    }
                }
            }

            &.wrap-tab-title {
                .tab-link {
                    > a {
                        white-space: normal;
                    }
                }

                & > li.tab-group {            
                    .collapsible-header {
                        white-space: normal;
                    }
                }
            }
        }
    }

    .grouped-tab-content {
        float: left;
        max-width: calc(75% - 15px);
    }
}