@use '../styles/variables' as v;

$padding: 12px;

.table {
  width: 100%;

  > tbody,
  > thead {
    > tr {
      > th,
      > td {
        vertical-align: top;
        border-top: 1px solid v.$color-light-grey;
        padding: $padding;
      }

      > th {
        text-align: left;
        font-weight: bold;
      }

      > td {
        background: white;
      }

      &:hover {
        > td,
        > th {
          background: #eee;
        }
      }
    }
  }
}

.th {
  a {
    text-decoration: none;
    color: v.$body-font-color;
    display: flex;
    align-items: center;

    > div.arrows {
      order: 0;
      display: flex;
      flex-direction: column;
      margin-left: 6px;

      &:before,
      &:after {
        content: '';
        display: block;
        width: 12px;
        height: 5px;
        background: #ddd;
      }

      &:before {
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
      }

      &:after {
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        margin-top: 2px;
      }
    }

    &:hover {
      color: v.$color-blue;

      &:not(.current):not(.desc),
      &.current.desc {
        > div.arrows:before {
          background: v.$color-blue;
        }
      }

      &:not(.current).desc,
      &.current:not(.desc) {
        > div.arrows:after {
          background: v.$color-blue;
        }
      }
    }

    &.current:not(:hover) {
      &:not(.desc) {
        > div.arrows:before {
          background: v.$body-font-color;
        }
      }

      &.desc {
        > div.arrows:after {
          background: v.$body-font-color;
        }
      }
    }
  }
}

.minimize {
  width: 0;
  white-space: nowrap;
}

td.buttons {
  width: 0;
  padding: 0 $padding;
  vertical-align: middle;

  > div {
    display: flex;

    > *:not(:last-child) {
      margin-right: 2px;
    }
  }
}