@layer base {
  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* height: 2.5rem; */
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-7);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-medium);
    border: 1px solid;
    border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2) rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
    transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;

    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--primary), white 25%);
    }

    &:active:not(:disabled) {
      transform: translate(1px, 1px);
    }

    &[data-variant="secondary"] {
      background-color: var(--secondary);
      color: var(--secondary-foreground);
      border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);

      &:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--secondary), black 10%);
      }
    }

    &[data-variant="danger"] {
      background-color: var(--danger);
      color: var(--danger-foreground);

      &:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--danger), black 15%);
      }
    }

    &.outline {
      background-color: transparent;
      border-color: var(--border);

      &:not([data-variant]) {
        color: var(--foreground);
      }
      &[data-variant="danger"] {
        color: var(--danger);
        border-color: var(--danger);
        &:hover:not(:disabled) {
          background-color: color-mix(in srgb, var(--danger), transparent 90%);
        }
      }
      &[data-variant="secondary"] {
        color: var(--secondary-foreground);
        border-color: var(--secondary);
        &:hover:not(:disabled) {
          background-color: color-mix(in srgb, var(--secondary), transparent 80%);
        }
      }
      &:hover:not(:disabled):not([data-variant]) {
        background-color: var(--accent);
      }
    }

    &.ghost {
      background-color: transparent;
      border-color: transparent;

      &:not([data-variant]) {
        color: var(--foreground);
      }
      &[data-variant="danger"] {
        color: var(--danger);
        &:hover:not(:disabled) {
          background-color: color-mix(in srgb, var(--danger), transparent 90%);
        }
      }
      &[data-variant="secondary"] {
        color: var(--secondary-foreground);
        &:hover:not(:disabled) {
          background-color: color-mix(in srgb, var(--secondary), transparent 80%);
        }
      }
      &:hover:not(:disabled):not([data-variant]) {
        background-color: var(--accent);
      }
    }

    &.small {
      padding: var(--space-1) var(--space-3);
      font-size: var(--text-8);
    }

    &.large {
      height: 3rem;
      padding: 0 var(--space-6);
      font-size: var(--text-regular);
    }

    &.icon {
      width: 2.5rem;
      padding: 0;

      &.small {
        width: 2rem;
      }

      &.large {
        width: 3rem;
      }
    }
  }

  ::file-selector-button {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
  }
  ::file-selector-button:hover {
    /* pseudoelement:hover can't be nested and has to be a separate block. */
    background-color: var(--accent);
  }
}

@layer components {
  menu.buttons {
    padding-inline-start: 0;
    display: inline-flex;

    & > :is(button, [type=button], [type=submit], [type=reset], a.button) {
      border-radius: 0;

      &:first-child {
        border-start-start-radius: var(--radius-medium);
        border-end-start-radius: var(--radius-medium);
      }

      &:last-child {
        border-start-end-radius: var(--radius-medium);
        border-end-end-radius: var(--radius-medium);
      }

      &:not(:last-child) {
        border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
      }
    }
  }
}