@import '~scss/variables';

.wrapper {
  border-radius: $border-radius;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  background-color: #ffffff;
  overflow: hidden;
}

.pane {
  padding-left: 20px;
  padding-right: 20px;
  @at-root {
    .pane__toolbar {
      background-color: $lightest;
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: solid 1px #d8dee5;
    }
    .pane__pagination {
      background-color: $lightest;
      line-height: 56px;
      box-shadow: 0 -1px 0 0 #d8dee5;
    }
  }
}

.title {
  font-size: 14px;
  font-weight: 600;
  line-height: 66px;
  color: #242e42;
}

.toolbar {
  &::after {
    content: '';
    clear: both;
    display: block;
  }
  @at-root {
    .toolbar_buttons {
      float: right;
    }
    .toolbar_filter {
      float: left;
      display: flex;
    }
    .sort_button {
      display: inline-block;
      margin-top: 7px;
      margin-left: 30px;
      text-align: center;
      vertical-align: top;
      cursor: pointer;
    }
  }

  :global .select {
    width: 250px;

    & + .select {
      margin-left: 12px;
    }
  }
}

.table.table_rank.table_no_border {
  td {
    color: #79879c;
  }
  table {
    border-collapse: separate;
    border-spacing: 0 5px;
  }
  th {
    border-bottom: none;
  }
  .rankList_row {
    h3 {
      font-size: 14px;
      color: #242e42;
      font-weight: bold;
    }
    td,
    th {
      padding: 10px 20px;
      border: none;
    }
    td {
      background: $lightest;
    }
    td:first-child {
      border-radius: 4px 0 0 4px;
    }
    td:last-child {
      border-radius: 0 4px 4px 0;
    }
    td.rankCol {
      background: #dbefe2;
    }
  }
}
