@import '../../_widgetsCommon.scss';
$tableCellVerticalPadding: 9px;
$tableCellHorizontalPadding: 12px;

$tableCellLinkVerticalPadding: 3px;
$tableCellLinkHorizontalPadding: 6px;

$tableCellInlineLinkVerticalPadding: 3px;
$tableCellInlineLinkHorizontalPadding: 4px;

.bolt-table-header-cell {
    padding: 0;
}

.bolt-table-header-cell-content {
    border: 1px solid transparent;
    border-radius: 4px;
    color: $secondary-text;
    font-size: $fontSize;
    font-weight: $fontWeightSemiBold;
    margin: 7px 0px;
    outline: none;
    padding: 6px 11px;
    position: relative;
    text-align: left;

    @media screen and (-ms-high-contrast: active) {
        border-color: transparent;
    }
}

.bolt-table-header-cell-actionable {
    cursor: pointer;

    &:hover {
        background-color: $list-row-hover-color;
    }
}

.bolt-focus-visible .bolt-table-header-cell-actionable:focus {
    background-color: $list-row-select-color;
}

.bolt-table-header-cell-empty:hover {
    background-color: inherit;
}

.bolt-table-header-sort-icon {
    padding: 0 4px;
}

.bolt-table-header-sizer {
    bottom: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.bolt-table-header-spacer {
    border-bottom: 1px solid $list-cell-bottom-border-color;
    padding: 0px;
}

.bolt-table-header-row.focused .bolt-table-cell-content-reveal,
.bolt-table-header-row:hover .bolt-table-cell-content-reveal,
.bolt-table-row.focused .bolt-table-cell-content-reveal,
.bolt-table-row:hover .bolt-table-cell-content-reveal {
    visibility: visible;
}

.bolt-table-two-line-cell-item {
    margin: 1px 0px;
}

.bolt-table-two-line-cell-icon {
    margin-right: 12px;
}

.bolt-table-cell-compact {
    padding: 0px;
}

.bolt-table-show-lines .bolt-table-row:not(.first-row) .bolt-table-cell {
    border-top: 1px solid $list-cell-bottom-border-color;
}

.bolt-table-cell-primary {
    font-weight: $fontWeightSemiBold;
}

.bolt-table-cell-tertiary {
    color: rgba(0, 0, 0, 0.55); /* @TODO: What color to use for a light color. */
}

.bolt-table-cell-content {
    padding: $tableCellVerticalPadding $tableCellHorizontalPadding;

    .bolt-list-cell-child:not(:last-child) {
        margin-right: 4px;
    }

    .bolt-list-cell-text {
        flex-grow: 1;
        overflow: hidden;
    }
}

/// Apply to a cell's content if the cell contains only a link.
/// @group table|link
.bolt-table-cell-content-with-link {
    padding: ($tableCellVerticalPadding - $tableCellLinkVerticalPadding) ($tableCellHorizontalPadding - $tableCellLinkHorizontalPadding);
}

/// Apply to a cell's content if the cell contains an inline link, along with other content.
/// @group table|link
.bolt-table-cell-content-with-inline-link {
    padding: ($tableCellVerticalPadding - $tableCellInlineLinkVerticalPadding) ($tableCellHorizontalPadding - $tableCellInlineLinkHorizontalPadding);
}

.bolt-table-inline-link-left-padding {
    padding-left: $tableCellInlineLinkHorizontalPadding;
}

.bolt-table-inline-link-right-padding {
    padding-right: $tableCellInlineLinkHorizontalPadding;
}

/// Apply bolt-table-link to a link in a table.
/// @group table|link
.bolt-table-link.bolt-link {
    padding: $tableCellLinkVerticalPadding $tableCellLinkHorizontalPadding;

    text-decoration: none;
    color: inherit;
    border-radius: 4px;

    &:focus,
    &:active {
        outline: none;
    }

    &:hover {
        color: $communication-foreground;
        background-color: $transblack-6;
    }
}

/// Apply to a link in a table that is inline - meaning there are multiple links
/// or other non-link content in the cell.
/// @group table|link
.bolt-table-inline-link.bolt-table-link {
    padding: $tableCellInlineLinkVerticalPadding $tableCellInlineLinkHorizontalPadding;
}

/// Apply to your cell's content to only show on row hover/focus
/// @group table|visibility
.bolt-table-cell-content-reveal {
    visibility: hidden;
}

.bolt-table-cell-select .bolt-table-header-cell-content:hover {
    background-color: inherit;
}

.bolt-table-cell-select {
    padding: 2px 0px 0px 0px;
}

.bolt-table-cell-side-action {
    padding: 0px 0px 0px 8px;
}

.bolt-table-spacer-cell {
    z-index: 1;
}

.bolt-gripper-container {
    margin-left: 5px;
    width: 10px;

    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.bolt-gripper {
    background-image: url("data:image/svg+xml;utf8,<svg width='6' height='20' viewBox='0 0 6 20' fill='black' opacity='0.3' xmlns='http://www.w3.org/2000/svg'><circle cx='1' cy='7' r='1'/><circle cx='1' cy='13' r='1'/><circle cx='1' cy='19' r='1'/><circle cx='5' cy='7' r='1'/><circle cx='1' cy='1' r='1'/><circle cx='5' cy='1' r='1'/><circle cx='5' cy='13' r='1'/><circle cx='5' cy='19' r='1'/></svg>");
    height: 20px;
    width: 6px;
}

.bolt-focus-visible .bolt-table-header-cell-content:focus {
    @include box-shadow-focus-rect();

    border-color: $communication-background;
    z-index: 1;

    @media screen and (-ms-high-contrast: active) {
        border-color: highlight;
    }
}

.bolt-focus-visible .bolt-table .bolt-list-row:focus .bolt-list-cell {
    border-color: $list-row-select-focus-border-color;
}

.bolt-focus-visible {
    .bolt-table-link:focus {
        outline: none;
        color: $communication-foreground;
        background-color: $transblack-6;
    }
}