/* Target the root selector defined in your PHP ($css_selector) */
a[ncildownloadbutton] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-xs) var(--space-m);
  border: 2px solid var(--primary);
  background-color: var(--primary-l-2);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 5px;
}

@media (max-width: 480px) { /* >= sm */
  a[ncildownloadbutton] {
    gap: var(--space-s);
  }
}

a[ncildownloadbutton]:hover {
  background-color: var(--primary-l-1);
}

a[ncildownloadbutton] .download-inner {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* column-gap: 2ch; */
}

a[ncildownloadbutton] .download-inner .download-title {
  color: var(--primary);
  font-size: var(--text-m);
  font-weight: 700;
}

a[ncildownloadbutton] .download-inner .download-size {
  font-size: var(--text-s);
  font-weight: 600;
  text-align: center;
  margin-left: var(--spacing-m);
}

a[ncildownloadbutton] .download-inner .download-size > span {
  white-space: nowrap;
}

a[ncildownloadbutton]:hover .download-inner .download-title {
  color: var(--primary-d-1);
}

a[ncildownloadbutton] .ncil-download-button-icon-wrapper {
  display: flex;
  align-items: center;
}

a[ncildownloadbutton] .ncil-download-button-icon, a[ncildownloadbutton] .ncil-download-button-icon::before {
  color: var(--primary);
  font-size: var(--text-m);
}