.table {
    --rocket-ui-background-color: var(--rocket-color-white-base);
    --rocket-ui-border-color: var(--rocket-color-grey-300);

    width: auto;
    overflow: hidden;
    border: 1px solid var(--rocket-ui-border-color);
    border-radius: var(--rocket-components-border-radius);
    border-collapse: separate;
    border-spacing: 0;

    th, td {
        min-width: 4rem;
        padding: 1rem;
        font-weight: 400;
        font-size: 1.875rem;
        line-height: 1.33;
    }

    th {
        padding: 1rem;
        color: var(--rocket-color-white-base);
        background-color: var(--rocket-color-primary-100);
        border-bottom: 1px solid var(--rocket-ui-border-color);
    }

    tbody {
        tr {
            background-color: var(--rocket-ui-background-color);
        }
    }

    td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--rocket-ui-border-color);
    }
}

.table-wrapper {
    width: 100%;
    padding-bottom: .5rem;
    overflow-x: auto;

    &::-webkit-scrollbar {
        @include size(100%, 2rem);
    }

    &::-webkit-scrollbar-track {
        background-color: var(--rocket-ui-background-color);
        border: 1px solid var(--rocket-color-grey-300);
        border-radius: var(--rocket-components-border-radius);
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--rocket-color-grey-300);
        background-clip: padding-box;
        border: .5rem solid rgba(0, 0, 0, 0);
        border-radius: var(--rocket-components-border-radius);
    }
}