@import './theme.scss';

/* TABLE */

.table {
    margin-bottom: 1.5rem;
    width: 100%;
    border-collapse: collapse; /* Allows us to set 0 margin in table cells */
    border-spacing: 0;
    text-align: center; /* Text center by default */

    td,
    th {
        border: 1px solid transparentize(map-get($grays, '300'), 0.5);
        border-width: 0 0 1px;
        padding: 0.75rem;
        vertical-align: top;
        text-align: inherit;
        margin: 0;
    }

    tr {
        transition: all 0.3s;
        
        &.selected {
            /* Style a selected row */
            background-color: var(--cirrus-primary);
            color: #fff;
        }
    }

    .table caption {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        color: map-get($grays, '300');
        text-align: left;
        caption-side: bottom;
    }

    tr:not(.selected):hover,
    &.striped tbody tr:not(.selected):nth-child(even):hover {
        background-color: transparentize(map-get($grays, '300'), 0.85);
    }

    /* Thicker border for table header */
    thead th,
    thead {
        border-bottom: 2px solid transparentize(map-get($grays, '300'), 0.5);
    }

    thead th,
    tfoot th {
        padding: 1rem;
    }

    tfoot th {
        border-top: 2px solid transparentize(map-get($grays, '300'), 0.5);
        border-bottom: none;
    }

    /* CUSTOM STYLES */
    /* All borders */
    &.bordered {
        thead th,
        thead {
            border-bottom: 1px solid transparentize(map-get($grays, '300'), 0.5);
        }

        td,
        th {
            border: 1px solid rgba(219, 219, 219, 0.5);
        }

        thead td,
        thead {
            border-width: 1px;
        }
    }

    /* Striped table */
    &.striped tbody tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Decrease padding */
    &.small td,
    &.small th {
        padding: 0.25rem 0.75rem;
    }

    /* Fixed title table */
    &.fixed-head thead {
        position: relative;
        display: block;
    }
    
    &.fixed-head tbody {
        min-height: 200px; /* Set the height you want */
        display: block; /* Needed */
        overflow: auto; /* Shows scrollbars */
    }
    
    &.fixed-head tr {
        display: table;
        width: 100%; /* Forces row to span container */
    }

    /* Borderless Table (for inner cells) */
    &.borderless thead th,
    &.borderless th,
    &.borderless td {
        border: none;
    }
}