@use '@gear-js/ui/headings' as *;
@use '@gear-js/ui/variables' as *;
@use '@/shared/assets/styles/variables' as shared;
@use '@/shared/assets/styles/animations' as *;
@use '@/shared/assets/styles/mixins' as *;

.explorer {
  display: grid;
  grid-template-columns: 7.75fr 2.25fr;
  gap: 32px;
}

.heading {
  @include heading(24px, 31px, 500);
  color: shared.$gray800;
  align-self: center;
}

//

.header,
.row {
  padding: 0 10px;
  display: grid;

  > * {
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.header {
  font-weight: 600;
  text-transform: uppercase;

  > * {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.row {
  font-weight: 500;
  color: #898b94;

  > * {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  &:nth-child(even) {
    background-color: #2b2b2e;
  }

  &:nth-child(odd) {
    background-color: #222225;
  }
}

.body {
  @include childrenMargin(16px);
  border-radius: $borderRadius;
  overflow: hidden;
  position: relative;
}

.alignRight {
  text-align: right;
}

.placeholder {
  @include loading;
  position: relative;

  svg {
    width: 100%;
  }
}