@use 'mixins' as *;

.cbp-btn__secondary {
  background-color: var(--cbp-color-interactive-secondary-dark);
  border-color: var(--cbp-color-interactive-secondary-dark);
  color: var(--cbp-color-text-lightest);

  &:hover:not(:focus):not(:disabled) {
    background-color: var(--cbp-color-interactive-secondary-darker);
    border-color: var(--cbp-color-interactive-secondary-darker);
  }
  @include btn-active-solid-pseudo;
}

.cbp-btn__secondary-outline {
  background-color: var(--cbp-color-white);
  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-darker);
  color: var(--cbp-color-interactive-secondary-darker);
  padding-top: var(--cbp-space-2x);
  padding-bottom: var(--cbp-space-2x);
  
  &:hover:not(:focus):not(:disabled) {
    background-color: var(--cbp-color-interactive-secondary-darker);
    border-color: var(--cbp-color-interactive-secondary-darker);
    color: var(--cbp-color-text-lightest);
  }

  @include btn-outline-pseudo;
}

.cbp-btn__secondary-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cbp-color-interactive-secondary-dark);

  &:hover:not(:focus):not(:disabled) {
    background-color: var(--cbp-color-interactive-secondary-lighter);
    border-color: var(--cbp-color-interactive-secondary-lighter);
    color: var(--cbp-color-interactive-secondary-darker);
  }

  &:active {
    color: var(--cbp-color-interactive-active-dark);
    background-color: transparent;
    border-color: transparent;
    outline: none;
  }

  &:disabled {
    color: var(--cbp-color-interactive-disabled-dark);
    background-color: transparent;
    border-color: transparent;
  }
}

.cbp-btn__secondary-float {
  background-color: var(--cbp-color-interactive-secondary-dark);
  border-color: var(--cbp-color-interactive-secondary-dark);
  border-radius: var(--cbp-border-radius-circle);
  box-shadow: var(--cbp-shadow-level-2-center);
  color: var(--cbp-color-text-lightest);
  height: 3.5rem;
  font-size: var(--cbp-space-6x);
  letter-spacing: unset;
  position: absolute;
  width: 3.5rem;
  z-index: var(--cbp-z-index-level-2);

  & > i {
    font-size: inherit;
    margin-right: 0;
  }

  &:hover:not(:disabled) {
    background-color: var(--cbp-color-interactive-secondary-darker);
    border-color: var(--cbp-color-interactive-secondary-darker);
  }
}


/* Dark Mode */
[data-cbp-theme="dark"] {
  & .cbp-btn__secondary {
    background-color: var(--cbp-color-interactive-secondary-lighter);
    border-color: var(--cbp-color-interactive-secondary-lighter);
    color: var(--cbp-color-text-darkest);

    &:hover {
      background-color: var(--cbp-color-interactive-secondary-light);
      border-color: var(--cbp-color-interactive-secondary-light);
    }

    @include btn-active-solid-pseudo($darkMode: true);
  }

  & .cbp-btn__secondary-outline {
    background-color: var(--cbp-color-base-neutral-darker);
    border-color: var(--cbp-color-interactive-secondary-lighter);
    color: var(--cbp-color-interactive-secondary-lighter);

    &:hover {
      background-color: var(--cbp-color-interactive-secondary-light);
      border-color: var(--cbp-color-interactive-secondary-light);
      color: var(--cbp-color-text-darkest);
    }

    @include btn-outline-pseudo($darkMode: true);
  }

  & .cbp-btn__secondary-ghost {
    color: var(--cbp-color-interactive-secondary-lighter);

    &:hover {
      background-color: var(--cbp-color-interactive-secondary-darker);
      color: var(--cbp-color-interactive-secondary-lighter);
    }

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

  & .cbp-btn__secondary-float {
    background-color: var(--cbp-color-interactive-secondary-lighter);
    border-color: var(--cbp-color-interactive-secondary-lighter);
    color: var(--cbp-color-text-darkest);
  
    &:hover {
      background-color: var(--cbp-color-interactive-secondary-light);
      border-color: var(--cbp-color-interactive-secondary-light);
      color: var(--cbp-color-text-darkest);
    }
  }
}