@import './base.css';

@layer components {
  .primary-button {
    color: var(--vscode-button-foreground);
    background-color: var(--vscode-button-background);
    &:hover:not([disabled]) {
      background-color: var(--vscode-button-hoverBackground);
    }
  }

  .secondary-button {
    color: var(--vscode-button-secondaryForeground);
    background-color: var(--vscode-button-secondaryBackground);
    &:hover:not([disabled]) {
      background-color: var(--vscode-button-secondaryHoverBackground);
    }
  }

  .link-button {
    color: var(--vscode-textLink-foreground);
    &:active:not([disabled]) {
      color: var(--vscode-textLink-activeForeground)
    }
  }

  .vscode-dark {
    .gradient-button {
      &:active:not([disabled]) {
        box-shadow: 0 3px 12px 0 rgba(255, 255, 255, 0.6) inset;
      }
    }
  }

  .vscode-light {
    .gradient-button {
      &:active:not([disabled]) {
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.6) inset;
      }
    }
  }

}
