@use "sass:meta";

@include meta.load-css("../../../node_modules/bootstrap/scss/bootstrap");
@include meta.load-css(
  "../../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
);

// Load the common styles
@include meta.load-css("../../common/src/lib/styles/styles.scss");

body {
  height: 600px;
  width: 375px;

  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--background);

  margin: 0;
}

// Button styling to match market
button {
  text-transform: uppercase;
  font-family: var(--font-sans);
}

// Override Bootstrap primary button with orange
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary-border);
  color: var(--primary-foreground);

  &:hover,
  &:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-border-hover);
    color: var(--primary-foreground-hover);
  }

  &:active,
  &.active {
    background-color: var(--primary-hover);
    border-color: var(--primary-border-hover);
  }

  &:disabled,
  &.disabled {
    background-color: var(--primary);
    border-color: var(--primary-border);
    opacity: 0.5;
  }

  &:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 62, 181, 0.25);
  }
}

// Style for outline variant
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary-border);

  &:hover,
  &:focus {
    background-color: var(--primary);
    border-color: var(--primary-border);
    color: var(--primary-foreground);
  }
}

// Form inputs styling
.form-control {
  background-color: var(--input);
  border-color: var(--input-border);
  color: var(--foreground);

  &:focus {
    background-color: var(--input);
    border-color: var(--primary);
    color: var(--foreground);
    box-shadow: 0 0 0 0.25rem rgba(255, 62, 181, 0.25);
  }

  &::placeholder {
    color: var(--muted-foreground);
  }
}

// Ensure alerts work in both themes
.alert-danger {
  background-color: var(--destructive);
  border-color: var(--destructive);
  color: var(--destructive-foreground);
}

// Cards and panels
.sam-card {
  background: var(--background-light);
  border-color: var(--border);
  color: var(--foreground);
}

// Bootstrap modal overrides - always use dark theme for modals
.modal-content {
  background-color: #1a1a1a;
  border-color: #3d3d3d;
  color: #fafafa;
}

.modal-header {
  border-bottom-color: #3d3d3d;

  .modal-title {
    color: #fafafa;
  }

  .btn-close {
    filter: invert(1);
  }
}

.modal-footer {
  border-top-color: #3d3d3d;
}

.modal-body {
  color: #fafafa;
}