@import "../../css/util";

.shareSection {
  button {
    margin-right: 0.5rem;
  }
}

.tocSection {
  margin-top: 1rem;
}

.section {
  position: sticky;
  top: calc(var(--ifm-navbar-height) + 1rem);
  height: fit-content;
  margin-left: 1rem;
}

.placeholder {
  min-height: 57px;
}

.tagsHeader {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: wrap;
  padding: 0.25rem 1rem;
  transition: color 0.3s ease-in-out;
  font-family: apple-system, system-ui, sans-serif;
  border-bottom: 1px solid #e8e8ed;

  html[data-theme="dark"] & {
    border-bottom: 1px solid #252525;
  }

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(12px);
  }

  > a {
    display: inline-block;
    padding: 0 0.5rem;
    font-weight: 400;
    font-size: 14px;
    transition: inherit;
    color: var(--color-title);

    &:default {
      color: #1d1d1f;
    }

    &:hover {
      color: var(--ifm-color-primary);
    }
  }

  &.expand {
    padding: 1rem;
    box-shadow: none;

    &::before {
      background-color: hsl(100deg 100% 100% / 85%);

      html[data-theme="dark"] & {
        background-color: hsl(0deg 0% 0% / 85%);
      }
    }

    > a {
      padding: 0 1rem;
    }
  }

  @include respond-below(sm) {
    justify-content: space-between;

    a {
      min-width: 110px;
    }
  }
}
