@import '../../styles/variables.less';

app-tabs-help {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    & mat-card {
        margin: 12px 6px 12px 12px;
        & mat-card-title {
            color: var(--scheme-color-1);
            font-size: 16px;
        }
        & mat-card-subtitle {
            color: var(--scheme-color-3);
            font-size: 12px;
        }
    }
    & div.left {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0;
        bottom: 0;
        left: 0;
        right: 330px;
        overflow: hidden;
        justify-content: stretch;
        justify-items: stretch;

        & .fill {
            overflow: auto;
        }
    }
    & div.right {
        position: absolute;
        width: 320px;
        right: 6px;
        bottom: 0;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        & div.spacer{
            flex: auto 100;
        }
        & mat-card-subtitle {
            text-align: right;
            & button:last-child {
                margin-right: -1px;
            }
            &:first-child {
                padding-top: 16px;
            }
        }
        & ul {
            padding: 8px 0;
        }
        & li {
            position: relative;
            display: block;
            list-style: none;
            cursor: default;
            height: 24px;
            width: 100%;
            & > a {
                text-decoration: none;
                cursor: default;
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                padding-top: 2px;
            }
            &:hover {
                background: var(--scheme-color-4);
                &::after,
                &::before {
                    position: absolute;
                    content: '';
                    width: 16px;
                    height: 100%;
                    background: var(--scheme-color-4);
                    top: 0;
                }
                &::after {
                    left: -16px;
                }
                &::before {
                    left:100%;
                }

            }
        }
    }

}