.button {
  font-family: var(--font-body);
  transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out;
  padding: .5rem 3rem .5rem .5rem;
  border: 0 none;
  min-width: 10rem;
  text-align: left;
  &:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -2px;
  }
}

.button:hover {
  border-bottom: 0 none;
}

.button:hover:not(:disabled) {
  cursor: pointer;
}

.button__primary {
  color: var(--white);
  background-color: var(--primary);
}
.button__primary:hover:not(:disabled) {
  cursor: pointer;
  background-color: var(--magenta02);
}
.button__primary--disabled {
  cursor: not-allowed;
  color: var(--grey03);
  background-color: var(--grey01);
}

.button__tertiary {
  color: var(--white);
  border: 2px solid var(--white);
  background-color: transparent;
}
.button__tertiary:hover:not(:disabled) {
  background-color: var(--white);
  color: var(--primary);
}
.button__tertiary--disabled {
  cursor: not-allowed;
  opacity: .7;
}

.button__tab {
  background-color: var(--grey05);
  padding: .5rem 1.5rem;
  border: 0 none;
  color: var(--grey02);
  border-top: 2px solid var(--grey04);
  &:hover {
    background-color: var(--grey);
  }
}
.button__tab.active {
  background-color: transparent;
  backdrop-filter: blur(16px); 
  color: var(--white);
  border-top: 2px solid var(--primary);
}
.button__tab:disabled {
  cursor: not-allowed;
  opacity: .7;
  color: var(--grey03);
}

.button__popover-option {
  padding: 0.75rem 1rem;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  width: 100%;
  min-width: auto;
  text-align: left;

  &:hover:not(:disabled),
  &:focus-visible {
    background-color: var(--grey04);
  }
}