@use 'common-mixins';

:host {
    background-color: var(--iqser-background);
    display: block;
}

.w-100p {
    width: 100%;
}

.right-container {
    display: flex;
    flex-direction: column;
    width: 375px;
    min-width: 375px;
    padding: 16px 24px;
    overflow: hidden;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.sk-table {
    display: flex;

    .sk-table-header,
    .sk-table-cell {
        padding: 0 10px;
        border-bottom: 1px solid var(--iqser-separator);
        box-sizing: border-box;
    }

    .sk-table-column {
        display: flex;
        flex-direction: column;
        flex: 1;

        &:first-child {
            flex: 3;

            .sk-table-header,
            .sk-table-cell {
                padding-left: 56px;
            }
        }

        .sk-line {
            margin: auto 0;
        }

        &:last-child {
            flex: 2;

            .sk-table-header,
            .sk-table-cell {
                padding-right: 21px;
            }

            .sk-line {
                margin-left: auto;
            }
        }

        &:nth-child(4),
        &:nth-child(5) {
            .sk-line,
            .sk-circle {
                margin: auto;
            }
        }
    }

    .sk-table-header {
        height: 30px;
        padding-top: 11px;
    }

    .sk-table-cell {
        height: 80px;
        display: flex;
        align-items: center;
    }
}
