@use 'sass:math';
@import "~payload/scss";

.nav-group {
  margin-bottom: 2rem;

  &:first-child {
    margin-top: 2rem;
  }

  @media (min-width: 768px) {
    .nav-group__content {
      display: flex;
      flex-direction: column;
      row-gap: 0.2rem;
    }
  }

  .nav__link {
    // padding: 0.2403846154rem 2.8846153846rem 0.2403846154rem 0;
    padding: 0;
  }
}

.nav-group__label {
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 0.03em;
}

.localizer button {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  border: 1px solid var(--theme-elevation-100);
  text-transform: uppercase;
  line-height: 1;
  padding: 2px 0 0 0;
  font-size: 0;
}

.localizer-button__current-label {
  font-size: 0.7rem;
  text-transform: lowercase;
}

.localizer-button__label,
.localizer-button__chevron {
  display: none;
}

%scrollbar {

  $size: 0;
  $radius: 0;

  &::-webkit-scrollbar {
    width: $size;
    height: $size;
    border-radius: math.div($size, 2);
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-button:hover {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    border-radius: $radius;

    &:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: $radius;

    &:hover {
      background-color: transparent;
    }
  }

}

.collection-edit__sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  @extend %scrollbar;
}

.render-fields {
  // display: flex;
  // flex-direction: column;

  &>.field-group {
    margin-bottom: var(--spacing-field);

    &>.rich-text {
      margin-bottom: 0;
    }
  }

  &>.field-group:first-child {
    margin-top: 0;
  }
}

.field-type.row .row__fields {
  --spacing-field: 0.6rem;
  row-gap: var(--spacing-field);
}

.btn--disabled {
  pointer-events: none;
}

.tabs-field__tabs-wrap {
  overflow-y: hidden;
  overflow-x: auto;
}

.tabs-field__tab-button {
  text-decoration: none;
}

.card-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &>.card__actions {
    margin: 0;
  }
}