@import '../../styles/shared/index';

.pager {
}

.header {
  @include type-heading-h3;
  display: flex;
  margin-bottom: .5rem;
  user-select: none;
  align-items: flex-start;
  flex-wrap: wrap;


  .disabled {
    cursor: default;

    g {
      stroke: color(gray, 50);
    }

    &:focus g,
    &:hover g {
      stroke: color(gray, 50);
    }
  }
}

.footer {
  @include type-heading-h5;
  display: flex;
  margin: 1rem 0;
  user-select: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  svg {
    display: inline-block;
    margin: 0 1rem;
    cursor: pointer;
    outline: 0;

    &:focus g,
    &:hover g {
      stroke: color(orange);
    }
  }
}

.subtitle {
  @include type-body-secondary(color(gray, 60));
  @include all-caps;
  width: 100%;
  margin: 0.5rem 0 0 0.25rem;
  font-weight: 500;
}