// vf-table

// **Thinking about deleting this file?**
// If your component needs no CSS/Sass, we still recommend leaving the
// scss files in place. As this is primarily a CSS framework, it is better to
// leave the empty files so you know a file wasn't accidently omitted.
// If you don't have any Sass, you can trim this block down to:
// "This page was intentionally left blank"

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
* Component: #{map-get($componentInfo, 'name')}
* Version: #{map-get($componentInfo, 'version')}
* Location: #{map-get($componentInfo, 'location')}
*/

@import 'vf-table.variables.scss';

.vf-table {
  background-color: neutral(0);
  border-collapse: collapse;
}

.vf-table__caption {
  @include set-type(text-heading--4);
  text-align: left;
}

.vf-table__header {
  border-bottom: 2px solid color(grey--lightest);
}

.vf-table__heading {

  @include set-type(text-heading--5, $custom-margin-bottom: 0);

  padding: 8px 16px;
  text-align: left;
}

.vf-table__button--sortable {
  align-items: center;
  color: currentColor;
  display: flex;
  font-weight: 700;

  svg {
    fill: neutral(300);
    height: 22px;
    margin-left: 4px;
    padding: 2px;
  }

  &:hover {
    svg {
      fill: neutral(700);
    }
  }
}


// Something like this for the UI changes when the sortable is clicked
// But go with whatever the JS tool you're using suggests
// Although - try and keep `vf-table__button` in there somewhere

.vf-table__button--sorted-bottom {
  #vf-table--sortable-top-arrow {
    fill: neutral(700);
  }
  #vf-table--sortable-bottom-arrow {
    opacity: 0;
  }
}

.vf-table__button--sorted-top {
  #vf-table--sortable-top-arrow {
    opacity: 0;
  }
  #vf-table--sortable-bottom-arrow {
    fill: neutral(700);
  }
}

.vf-table__cell {
  @include set-type(text-body--2, $custom-margin-bottom: 0);

  padding: 8px 16px;
  vertical-align: top;
}

.vf-table__row:nth-of-type(even) {
  background-color: ui-color(grey--light);

  .vf-table--no-strpe & {
    background-color: neutral(0);
  }
}

.vf-table__row .vf-table__heading {
  @include set-type(text-heading--5, $custom-margin-bottom: 0);

  text-align: left;
}

.vf-table__body {
  & .vf-table__row:not(.vf-table__row--selected):hover {
    background-color: interactive-color('background');
  }
}

.vf-table__label {
  margin: 0;
  text-align: center;
}

.vf-table__footer {
  background-color: color(grey--lightest);
}

// Selectable

.vf-table__cell--actions {
  .vf-button--icon {
    color: interactive-color();
    font-weight: 400;
    &:visited,
    &:hover,
    &:focus {
      color: interactive-color();
      font-weight: 400;
    }
  }
}

.vf-table__row--selected {
  background-color: interactive-color(background) !important;
  color: ui-color(white);


  .vf-button {
    color: ui-color(white);
  }
  .vf-button--icon {
    color: ui-color(white);
    font-weight: 400;
    &:visited,
    &:hover,
    &:focus {
      color: ui-color(white);
    }
  }

  .vf-table__label {
    &::before {
      // TODO: sort this important out
      border-color: ui-color(black) !important;
    }
  }
}

// Table Actions

.vf-table__actions {
  background-color: interactive-color();
  padding: 16px;

  .vf-button {
    @include set-type(text-body--2, $custom-margin-bottom: 0);

    color: ui-color(white);
    font-weight: 400;
    margin-left: 1em;

    &:first-child {
      margin-left: 0;
    }
    &:visited,
    &:hover,
    &:focus {
      color: ui-color(white);

    }
  }
}

// Deprecated Variants 04-13-21
html:not(.vf-disable-deprecated) {
  .vf-table--bordered {
    @warn 'This variant has been deprecated';
    border: 1px solid color(grey);
    .vf-table__heading {
      border: 1px solid color(grey);
    }
    .vf-table__cell {
      border: 1px solid color(grey);
    }
  }

  .vf-table--striped {
    @warn 'This variant has been deprecated and is now the default styling';
    .vf-table__body {
      & .vf-table__row:nth-of-type(even) {
        background-color: ui-color(grey--light);
      }
    }
  }

  .vf-table--tight {
    @warn 'This variant has been deprecated';
    .vf-table__heading {
      padding: 4px 4px;
    }
    .vf-table__cell {
      padding: 4px 4px;
    }
  }

  .vf-table--loose {
    @warn 'This variant has been deprecated';
    .vf-table__heading {
      padding: 16px 24px;
    }
    .vf-table__cell {
      padding: 8px 24px;
    }
  }

  .vf-table--fixed {
    @warn 'This variant has been deprecated';
    table-layout: fixed;
  }
}