/**
 * Phantom atomic elements.
 * Ported from src/scss/custom/phantom/atomic/*.
 */

/* --------------------------------------------------------------- attachments */

/* ATTACHMENTS COLOR TEXT */
.it-list-wrapper.phantom-attachments .it-list .list-item .text {
  color: var(--pt-color-link-text-default);
  text-decoration: none;
}

.it-list-wrapper.phantom-attachments .it-list .list-item .it-rounded-icon svg.icon,
.it-list-wrapper.phantom-attachments .it-list .list-item .it-right-zone svg.icon {
  fill: var(--pt-icon-primary);
}

.it-list-wrapper.phantom-attachments .it-list .list-item:hover {
  color: var(--pt-color-text-primary-hover);
}

.it-list-wrapper.phantom-attachments .it-list .list-item:hover .text {
  color: var(--pt-color-text-primary-hover);
}

.it-list-wrapper.phantom-attachments .it-list .list-item:hover .it-right-zone svg.icon {
  fill: var(--pt-icon-primary-hover);
}

/* ------------------------------------------------ buttons: corner radius */

.btn {
  border-radius: var(--pt-border-radius-button);
}

/* ------------------------------------------------------ buttons: filled */

input.button.btn,
.btn-primary {
  background: var(--pt-color-background-button-primary);
}

input.button.btn,
input.button.btn *,
.btn-primary,
.btn-primary * {
  color: var(--pt-color-text-button-primary);
}

input.button.btn .icon,
.btn-primary .icon {
  fill: var(--pt-color-text-button-primary);
}

input.button.btn:first-child:active,
input.button.btn:hover,
input.button.btn.active,
.btn-primary:first-child:active,
.btn-primary:hover,
.btn-primary.active {
  background: var(--pt-color-background-button-primary-hover);
}

:not(.btn-check) + .btn.btn-primary:active {
  background: var(--pt-color-background-button-primary-hover);
}

.btn-secondary {
  background: var(--pt-color-background-button-secondary);
}

.btn-secondary,
.btn-secondary * {
  color: var(--pt-color-text-button-secondary);
}

.btn-secondary .icon {
  fill: var(--pt-color-text-button-secondary);
}

.btn-secondary:first-child:active,
.btn-secondary:hover,
.btn-secondary.active {
  background: var(--pt-color-background-button-secondary-hover);
}

:not(.btn-check) + .btn.btn-secondary:active {
  background: var(--pt-color-background-button-secondary-hover);
}

/* ----------------------------------------------------- buttons: outline */

input.button.btn[value="Reset"],
.btn-outline-primary {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--pt-color-border-button-outline-primary);
}

input.button.btn[value="Reset"],
input.button.btn[value="Reset"] *,
.btn-outline-primary,
.btn-outline-primary * {
  color: var(--pt-color-text-button-primary-outline);
}

input.button.btn[value="Reset"] .icon,
.btn-outline-primary .icon {
  fill: var(--pt-color-text-button-primary-outline);
}

input.button.btn[value="Reset"]:first-child:active,
input.button.btn[value="Reset"]:hover,
input.button.btn[value="Reset"].active,
.btn-outline-primary:first-child:active,
.btn-outline-primary:hover,
.btn-outline-primary.active {
  box-shadow: inset 0 0 0 2px var(--pt-color-border-button-outline-primary-hover);
}

.btn-outline-secondary {
  box-shadow: inset 0 0 0 2px var(--pt-color-border-button-outline-secondary);
}

.btn-outline-secondary,
.btn-outline-secondary * {
  color: var(--pt-color-text-button-secondary-outline);
}

.btn-outline-secondary .icon {
  fill: var(--pt-color-text-button-secondary-outline);
}

.btn-outline-secondary:first-child:active,
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
  box-shadow: inset 0 0 0 2px var(--pt-color-border-button-outline-secondary-hover);
}

:not(.btn-check) + .btn.btn-outline-secondary:active {
  background: transparent;
}

/* -------------------------------------------------------- buttons: link */

.btn-link span,
.btn-link {
  text-decoration: none;
  color: var(--pt-color-text-primary);
}

.btn-link svg {
  fill: var(--pt-color-text-primary);
}

/* ---------------------------------------------------------- chips: filled */

body .chip-phantom.chip-simple-phantom {
  background-color: var(--pt-color-background-chip);
}

body .chip-phantom .chip-label-phantom {
  color: var(--pt-color-text-chip);
}

body .chip-phantom.chip-primary-phantom.chip-simple-phantom:hover {
  background-color: var(--pt-color-background-chip-hover);
}

body .chip-phantom.chip-primary-phantom.chip-simple-phantom:hover span {
  color: var(--pt-color-text-chip-hover);
}

/* --------------------------------------------------------- chips: outline */

body .chip-phantom.chip-outline {
  background-color: transparent;
  border-color: var(--pt-color-border-chip-outline);
  border-width: 1px;
}

body .chip-phantom.chip-outline .chip-label-phantom {
  color: var(--pt-color-text-chip-outline);
}

body .chip-phantom.chip-outline.chip-primary-phantom:hover {
  background-color: transparent;
}

body .chip-phantom.chip-outline.chip-primary-phantom:hover span {
  color: var(--pt-color-text-chip-outline-hover);
}

/* -------------------------------------------------------------------- forms */

/* CHECKBOX */
.form-check [type="checkbox"]:checked + label::after,
.form-check-input:checked {
  background-color: var(--pt-color-text-primary);
  border-color: var(--pt-color-text-primary);
}

/* RADIO */
.form-check [type="radio"]:checked + label::after {
  background-color: var(--pt-color-text-primary);
  border-color: var(--pt-color-text-primary);
}

.form-check [type="radio"]:checked + label::before {
  border-color: var(--pt-color-text-primary);
}

/* --------------------------------------------------------------------- icon */

.icon-primary {
  fill: var(--pt-color-text-primary) !important;
}

.icon-secondary {
  fill: var(--pt-color-text-secondary) !important;
}

/* -------------------------------------------------------------------- table */

table .table-theme {
  background-color: var(--pt-color-background-primary);
  color: #fff;
}

/* --------------------------------------------------------------------- tabs */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--pt-color-text-primary);
  color: var(--pt-color-text-primary);
}

/* label hover */
body .nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.show .nav-link:hover {
  color: var(--pt-color-text-primary-hover);
}