/* =========================================================
   TextBases Button Component System V1
   One source of truth for all buttons and action bars.
   ========================================================= */

.tb-btn,
.tb-button,
.tb-tool-cta-card a {
  min-height: var(--tb-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: var(--tb-radius-md);
  border: 1px solid var(--tb-border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--tb-text-soft);
  font: 750 0.94rem/1 var(--tb-font-main);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--tb-transition),
    border-color var(--tb-transition),
    background var(--tb-transition),
    color var(--tb-transition),
    box-shadow var(--tb-transition);
}

.tb-btn:hover,
.tb-button:hover,
.tb-tool-cta-card a:hover {
  transform: translateY(-1px);
  border-color: var(--tb-accent-border);
  background: rgba(15, 23, 42, 0.96);
  color: var(--tb-text);
  box-shadow: var(--tb-accent-glow);
}

.tb-btn-primary,
.tb-button-primary {
  border-color: var(--tb-accent-border);
  color: #e0f2fe;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(124, 58, 237, 0.20)),
    rgba(15, 23, 42, 0.88);
}

.tb-btn-ghost {
  background: transparent;
}

.tb-btn svg,
.tb-button svg,
.tb-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.tb-action-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.tb-action-bar .tb-btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .tb-action-bar {
    grid-template-columns: 1fr;
  }

  .tb-action-bar .tb-btn {
    white-space: normal;
  }
}


/* =========================================================
   TextBases Button Action System V1
   Global action button sizing + automatic CSS icons.
   Use:
   <button class="tb-btn" data-tb-action="paste">Paste</button>
   <button class="tb-btn tb-btn-primary" data-tb-action="copy">Copy Result</button>
   ========================================================= */

.tb-action-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.tb-action-bar .tb-btn,
.tb-btn[data-tb-action] {
  min-height: 48px;
  height: 48px;
  inline-size: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.tb-btn[data-tb-action]::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 1.05em;
  display: inline-block;
  background-color: currentColor;
  opacity: 0.96;
  transform: translateY(0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Clipboard / paste */
.tb-btn[data-tb-action="paste"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5h6'/%3E%3Cpath d='M9 3h6v4H9z'/%3E%3Cpath d='M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5h6'/%3E%3Cpath d='M9 3h6v4H9z'/%3E%3Cpath d='M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3C/svg%3E");
}

/* Lab/sample */
.tb-btn[data-tb-action="sample"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 2v7.31'/%3E%3Cpath d='M8 2h8'/%3E%3Cpath d='M9 9.31 4.7 18a3 3 0 0 0 2.68 4h9.24a3 3 0 0 0 2.68-4L15 9.31'/%3E%3Cpath d='M7.5 16h9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 2v7.31'/%3E%3Cpath d='M8 2h8'/%3E%3Cpath d='M9 9.31 4.7 18a3 3 0 0 0 2.68 4h9.24a3 3 0 0 0 2.68-4L15 9.31'/%3E%3Cpath d='M7.5 16h9'/%3E%3C/svg%3E");
}

/* Trash/clear */
.tb-btn[data-tb-action="clear"]::before,
.tb-btn[data-tb-action="delete"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
}

/* Copy result */
.tb-btn[data-tb-action="copy"]::before,
.tb-btn[data-tb-action="copy-result"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='10' height='10' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='10' height='10' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

/* Download */
.tb-btn[data-tb-action="download"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

/* Use output as new input */
.tb-btn[data-tb-action="use-input"]::before,
.tb-btn[data-tb-action="use-as-input"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3h4v4'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M7 21H3v-4'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3h4v4'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M7 21H3v-4'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
}

/* Generate */
.tb-btn[data-tb-action="generate"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-14h-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-14h-8z'/%3E%3C/svg%3E");
}

/* Reset / refresh */
.tb-btn[data-tb-action="reset"]::before,
.tb-btn[data-tb-action="refresh"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
}

@media (max-width: 620px) {
  .tb-action-bar {
    grid-template-columns: 1fr;
  }

  .tb-action-bar .tb-btn,
  .tb-btn[data-tb-action] {
    min-height: 46px;
    height: 46px;
  }
}