:root {
  --icc-btn-background: var(--icc-primary-500);
  --icc-btn-border-color: var(--icc-primary-500);
  --icc-btn-border-radius: 50rem;
  --icc-btn-color: var(--icc-tertiary-800);

  --icc-navlink-color: var(--icc-tertiary-950);
}
.icc-btn {
  background: var(--icc-btn-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--icc-btn-border-color);
  border-radius: var(--icc-btn-border-radius);
  color: var(--icc-btn-color);
  font-family: var(--icc-font-sans);
  font-size: var(--icc-text-md);
  font-weight: 700;
  line-height: var(--icc-leading-6);
  padding-inline: var(--icc-spacing-6);
  padding-block: var(--icc-spacing-2);
  text-decoration: none;
  margin-block: auto;
  text-align: center;
  display: inline-flex;
  gap: var(--icc-spacing-1);
  align-items: center;
  justify-content: center;
  cursor: pointer;

  svg {
    width: 20px;
    height: 20px;
  }
}
.icc-btn-small {
  padding-inline: var(--icc-spacing-3);
  padding-block: var(--icc-spacing-1);
}
.icc-btn-large {
  padding-block: var(--icc-spacing-3);
}
/*! Primary normal */
.icc-btn-primary:hover {
  --icc-btn-background: var(--icc-primary-600);
  --icc-btn-border-color: var(--icc-primary-600);
}
.icc-btn-primary:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-primary:active {
  --icc-btn-background: var(--icc-primary-700);
  --icc-btn-border-color: var(--icc-primary-700);
}
.icc-btn-primary:is(:focus, :focus-visible, :focus-within) {
  border-width: 2px;
  --icc-btn-border-color: var(--icc-primary-700);
}

/*! Secondary normal */
.icc-btn-secondary {
  --icc-btn-background: trasparent;
  --icc-btn-border-color: var(--icc-tertiary-800);
}
.icc-btn-secondary:hover {
  --icc-btn-background: var(--icc-primary-600);
  --icc-btn-border-color: var(--icc-primary-600);
}
.icc-btn-secondary:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-secondary:active {
  --icc-btn-background: var(--icc-primary-700);
  --icc-btn-border-color: var(--icc-primary-700);
}
.icc-btn-secondary:is(:focus, :focus-visible, :focus-within) {
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--icc-primary-700);
}

/*! icc-btn-danger */
.icc-btn-danger {
  --icc-btn-background: var(--icc-danger-500);
  --icc-btn-border-color: var(--icc-danger-500);
  --icc-btn-color: var(--icc-neutral-white);
}
.icc-btn-danger:hover {
  --icc-btn-background: var(--icc-danger-600);
  --icc-btn-border-color: var(--icc-danger-600);
}
.icc-btn-danger:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-danger:active {
  --icc-btn-background: var(--icc-danger-700);
  --icc-btn-border-color: var(--icc-danger-700);
}
.icc-btn-danger:is(:focus, :focus-visible, :focus-within) {
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--icc-danger-950);
  --icc-btn-border-color: var(--icc-danger-100);
}

/*! Button Trasparent */
.icc-btn-trasparent {
  --icc-btn-background: trasparent;
  --icc-btn-border-color: transparent;
}

/*! Button Icon */
.icc-btn-icon {
  --icc-btn-height: 40px;
  height: var(--icc-btn-height);
  line-height: var(--icc-btn-height);
  width: var(--icc-btn-height);
  padding: 0;
  --icc-btn-background: var(--icc-primary-500);
  --icc-btn-border-color: var(--icc-primary-500);
  text-align: center;
  border-radius: 50%;
}
.icc-btn-icon:hover {
  --icc-btn-background: var(--icc-primary-600);
  --icc-btn-border-color: var(--icc-primary-600);
}
.icc-btn-icon:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-icon:active {
  --icc-btn-background: var(--icc-primary-700);
  --icc-btn-border-color: var(--icc-primary-700);
}
.icc-btn-icon:is(:focus, :focus-visible, :focus-within) {
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--icc-tertiary-950);
  --icc-btn-border-color: var(--icc-neutral-white);
}

/*! Progress */
.icc-btn-progress {
  padding: var(--icc-spacing-2);
  --icc-btn-background: var(--icc-secondary-300);
  --icc-btn-border-color: var(--icc-secondary-300);

  svg {
    width: 22px;
    height: 22px;
  }
}

/*! Nav link */

.icc-navlink {
  background-color: transparent;
  border: 0;
  padding: var(--icc-spacing-3) var(--icc-spacing-4);
  color: var(--icc-navlink-color);
  cursor: pointer;
}
@media screen and (width < 1100px) {
  .icc-navlink {
    padding-inline: var(--icc-spacing-2);
  }
}
.icc-navlink:hover {
  --icc-navlink-color: var(--icc-secondary-500);
}
.icc-navlink:disabled {
  --icc-navlink-color: var(--icc-gray-600);
}
.icc-navlink:active {
  --icc-navlink-color: var(--icc-secondary-500);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.icc-navlink:has(:focus-visible) {
  border: 2px solid var(--icc-tertiary-950);
}

/*! Primary on dark */
.icc-btn-primary-ondark {
  --icc-btn-background: var(--icc-primary-500);
  --icc-btn-border-color: var(--icc-primary-500);
}
.icc-btn-primary-ondark:hover {
  --icc-btn-background: var(--icc-primary-400);
  --icc-btn-border-color: var(--icc-primary-400);
}
.icc-btn-primary-ondark:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-primary-ondark:active {
  --icc-btn-background: var(--icc-primary-300);
  --icc-btn-border-color: var(--icc-primary-300);
}
.icc-btn-primary-ondark:is(:focus, :focus-visible, :focus-within) {
  border-width: 2px;
  --icc-btn-border-color: var(--icc-primary-700);
}

/*! Secondary on dark */
.icc-btn-secondary-ondark {
  --icc-btn-background: trasparent;
  --icc-btn-border-color: var(--icc-primary-500);
  --icc-btn-color: var(--icc-primary-500);
}
.icc-btn-secondary-ondark:hover {
  --icc-btn-border-color: var(--icc-primary-400);
  --icc-btn-background: var(--icc-primary-400);
  --icc-btn-color: var(--icc-tertiary-800);
}
.icc-btn-secondary-ondark:disabled {
  --icc-btn-background: var(--icc-gray-100);
  --icc-btn-border-color: var(--icc-gray-100);
  --icc-btn-color: var(--icc-gray-400);
}
.icc-btn-secondary-ondark:active {
  --icc-btn-border-color: var(--icc-primary-300);
  --icc-btn-background: var(--icc-primary-300);
  --icc-btn-color: var(--icc-tertiary-800);
}
.icc-btn-secondary-ondark:is(:focus, :focus-visible, :focus-within) {
  outline: 2px solid var(--icc-primary-700);
}

/*! Icon ghost on dark */
.icc-btn-icon-ghost-ondark {
  --icc-btn-background: var(--icc-tertiary-950);
  --icc-btn-border-color: var(--icc-tertiary-950);
  --icc-btn-color: var(--icc-primary-500);
}
.icc-btn-icon-ghost-ondark:hover {
  --icc-btn-background: var(--icc-primary-900);
  --icc-btn-border-color: var(--icc-primary-900);
}
.icc-btn-icon-ghost-ondark:disabled {
  --icc-btn-background: var(--icc-secondary-500);
  --icc-btn-border-color: var(--icc-secondary-500);
  --icc-btn-color: var(--icc-gray-200);
}
.icc-btn-icon-ghost-ondark:active {
  --icc-btn-background: var(--icc-primary-950);
  --icc-btn-border-color: var(--icc-primary-950);
}
.icc-btn-icon-ghost-ondark:is(:focus, :focus-visible, :focus-within) {
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--icc-secondary-500);
  --icc-btn-color: var(--icc-secondary-500);
  --icc-btn-border-color: var(--icc-secondary-500);
  --icc-btn-background: var(--icc-secondary-500);
}

/*! Category e tag */
.icc-btn-category {
  --icc-btn-color: var(--icc-secondary-500);
  --icc-btn-border-color: var(--icc-primary-300);
  --icc-btn-background: var(--icc-primary-300);
  font-size: var(--icc-text-sm);
  font-weight: var(--icc-font-medium);
  text-transform: var(--icc-uppercase);
}
.icc-btn-tag {
  --icc-btn-color: var(--icc-secondary-500);
  --icc-btn-border-color: var(--icc-secondary-500);
  --icc-btn-background: trasparent;
  font-size: var(--icc-text-sm);
  font-weight: var(--icc-font-medium);
  text-transform: var(--icc-uppercase);
}

/*! Label */
.icc-label {
  display: inline-flex;
  gap: var(--icc-spacing-2);
  background-color: var(--icc-tertiary-800);
  border-radius: 2px;
  padding: var(--icc-spacing-2);
  color: var(--icc-neutral-white);
  width: min-content;
  text-wrap: nowrap;
  align-items: center;
}
.icc-label span {
  text-transform: var(--icc-uppercase);
  text-decoration: var(--icc-underline);
}

.icc-btn-filtri {
  --icc-btn-background: trasparent;
  --icc-btn-border-color: var(--icc-gray-200);
  --icc-btn-border-radius: var(--icc-spacing-2);
  --icc-btn-color: var(--icc-gray-950);
  display: flex;
  align-items: center;

  span {
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    background-color: var(--icc-tertiary-800);
    border-radius: 9999px;
    font-size: var(--icc-text-sm);
    color: var(--icc-neutral-white);
    margin-inline-start: var(--icc-spacing-1);
  }
}
.icc-btn-filtri::before {
  --icc-btn-filtri-dimension: 20px;
  content: "";
  background-color: var(--icc-gray-950);
  mask: url(../icon/filter-list-circle.svg);
  margin-inline-end: var(--icc-spacing-2);
  mask-size: var(--icc-btn-filtri-dimension);
  background-size: var(--icc-btn-filtri-dimension);
  height: var(--icc-btn-filtri-dimension);
  width: var(--icc-btn-filtri-dimension);
}

.icc-btn-filtri:hover {
  border-width: 2px;
}
.icc-btn-filtri:is(:focus, :focus-visible, :focus-within) {
  border-width: 3px;
  --icc-btn-border-color: var(--icc-tertiary-700);
}