@import '../config/import';

.crayons-tag {
  background: transparent;
  color: var(--tag-color);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  transition: all var(--transition-props);
  padding: clamp(var(--su-1), 0.25em, 0.5em) 0.5em;

  &__prefix {
    color: var(--tag-prefix);
    transition: all var(--transition-props);
    flex-shrink: 0;
  }

  &--filled {
    background: var(--tag-bg);
    color: var(--tag-color-hover);
  }

  &--monochrome {
    .crayons-tag__prefix {
      color: var(--tag-prefix);
    }
  }

  &:hover,
  &:focus {
    background: var(--tag-bg-hover);
    color: var(--tag-color-hover);
    box-shadow: inset 0 0 0 1px var(--tag-bg-hover),
      inset 0 0 0 1px var(--tag-bg-hover), inset 0 0 0 1px var(--tag-bg-hover);

    .crayons-tag__prefix {
      color: var(--tag-prefix-hover);
    }
  }
}

.tag-card {
  height: 195px;

  .crayons-tag {
    padding-top: 0;
    padding-bottom: 0;
  }

  &__badge {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: $breakpoint-s) {
  .tags-index {
    .crayons-page-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .tags-interaction-container {
      justify-content: space-between;
      width: 100%;
      grid-gap: 4px;
    }

    .tags-interaction-container__buttons > :first-child {
      padding-left: 0;
    }
  }
}
