@use "vars" as vars;

.plover-admin-badge,
.plover-admin-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: var(--plover-admin--transition, all ease-in 0.15s);
  color: var(--plover-admin--button--color--text, #ffffff);
  background: var(--plover-admin--button--color--background, vars.$primary-gradient);
  border-radius: var(--plover-admin--button--border-radius, 0.25rem);
  border-width: 0;
  font-family: inherit;
  font-size: var(--plover-admin--button--font-size, 0.875rem);
  font-weight: var(--plover-admin--button--font-weight, 600);
  //padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  svg {
    fill: currentColor;
  }

  &:hover, &:focus {
    color: var(--plover-admin--button--hover--color--text, #ffffff);
    background: var(--plover-admin--button--hover--color--background, vars.$primary-gradient);
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: currentColor;
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%
  }

  &:hover::after {
    animation: buttonripple 1s ease-out;
    text-decoration: none;
  }

  &:active {
    outline: none;
    box-shadow: none;
  }

  &.is-style-ghost {
    background: transparent !important;
    position: relative;
    z-index: 0;
    color: var(--plover-admin--button--color--background, vars.$primary);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: currentColor;
      opacity: 0.1;
      z-index: 1;
      border-radius: inherit;
    }

    &::after {
      background: currentColor;
    }

    &:hover {
      color: var(--plover-admin--button--color--background, vars.$primary-active);
    }
  }

  &.is-style-link {
    padding: 0;
    background: transparent;
    color: var(--plover-admin--button--color--background, vars.$primary);
    font-weight: 500;

    &:hover {
      text-decoration: underline;
    }

    &::after {
      display: none;
    }
  }
}

.plover-admin-badge {
  font-size: 12px;
  padding: 0.5rem 1em;
  border-radius: 999px;
}

.plover-admin-button {
  padding: 0.75rem 1.25em;
}


.is-style-dark {
  .plover-admin-badge,
  .plover-admin-button {
    &.is-style-ghost::before {
      opacity: 0.15;
    }
  }
}

@keyframes buttonripple {
  0% {
    transform: scale(0, 0);
    opacity: .15
  }

  20% {
    transform: scale(20, 20);
    opacity: .15
  }

  100% {
    opacity: 0;
    transform: scale(40, 40)
  }
}
