@layer components {
  :root {
    --settings-item__bg-color: var(--color-surface-primary);
    --settings-item__text-color: var(--color-neutral-700);
    --settings-item__border-radius: var(--border-radius-rounded-square);
    --settings-item__font-family: var(--typography-label-large__font-family);
    --settings-item__font-size: var(--typography-label-large__font-size);
    --settings-item__line-height: var(--typography-label-large__line-height);
    --settings-item__letter-spacing: var(
      --typography-label-large__letter-spacing
    );
    --settings-item__font-weight: var(--typography-label-large__font-weight);
    --settings-item__ring-width: 1.5px;
    --settings-item__ring-color: var(--color-neutral-100);
    --settings-item__py: 1rem;

    --settings-item__bg-color--hover: var(--color-neutral-100);
    --settings-item__text-color--hover: var(--settings-item__text-color);
    --settings-item__ring-width--hover: var(--settings-item__ring-width);
    --settings-item__ring-color--hover: var(--settings-item__ring-color);

    --settings-item__bg-color--active: var(--color-neutral-100);
    --settings-item__text-color--active: var(--settings-item__text-color);
    --settings-item__ring-width--active: var(--settings-item__ring-width);
    --settings-item__ring-color--active: var(--settings-item__ring-color);

    --settings-item__note-font-family: var(
      --typography-body-medium__font-family
    );
    --settings-item__note-font-size: var(--typography-body-medium__font-size);
    --settings-item__note-line-height: var(
      --typography-body-medium__line-height
    );
    --settings-item__note-letter-spacing: var(
      --typography-body-medium__letter-spacing
    );
    --settings-item__note-font-weight: var(
      --typography-body-medium__font-weight
    );

    --settings-item__forward-arrow-font-size: 1.125rem;

    --settings-item__forward-arrow-color: var(--color-neutral-200);

    --settings-item__border-color: var(--color-neutral-100);

    --settings-item-content__font-family: var(
      --typography-title-medium__font-family
    );
    --settings-item-content__font-size: var(
      --typography-body-medium__font-size
    );
    --settings-item-content__line-height: var(
      --typography-label-medium__line-height
    );
    --settings-item-content__letter-spacing: var(
      --typography-title-medium__letter-spacing
    );
    --settings-item-content__font-weight: var(
      --typography-title-medium__font-weight
    );
    --settings-item-content__text-color: var(--color-neutral-400);
    --settings-item-content__text-color--highlighted: var(--color-link);

    --settings-item__icon-color--pale: var(--color-neutral-200);
  }

  :root.dark {
    --settings-item__text-color: var(--color-neutral-100);
    --settings-item__ring-color: var(--color-neutral-500);
    --settings-item__bg-color--hover: var(--color-neutral-500);
    --settings-item__bg-color--active: var(--color-neutral-500);

    --settings-item__forward-arrow-color: var(--color-neutral-200);

    --settings-item__border-color: var(--color-neutral-400);

    --settings-item-content__text-color: var(--color-neutral-200);
  }

  .settings-item {
    @apply grid gap-x-2 gap-y-1;
    @apply items-center text-start;
    @apply widget-content-item__px--settings;

    background-color: var(--settings-item__bg-color);
    padding-top: var(--settings-item__py);
    padding-bottom: var(--settings-item__py);

    color: var(--settings-item__text-color);
    border-color: var(--settings-item__border-color);
    border-bottom-width: 1px;
    border-style: solid;

    --settings-item__grid-col-icon-width: 0;
    &.with-icon {
      --settings-item__grid-col-icon-width: 1.5rem;
    }

    --settings-item__grid-col-action: minmax(0rem, max-content);

    &.with-content {
      /* When Mobile View */
      grid-template-areas:
        "icon title action"
        ". content action";
      grid-template-columns: var(--settings-item__grid-col-icon-width) auto var(
          --settings-item__grid-col-action
        );

      /* When Not Mobile View */
      @media (min-width: theme("screens.tablet")) {
        grid-template-areas: "icon title content action";
        grid-template-columns: var(--settings-item__grid-col-icon-width) 9rem auto var(
            --settings-item__grid-col-action
          );
      }
    }

    &.without-content {
      grid-template-areas: "icon title action";
      grid-template-columns: var(--settings-item__grid-col-icon-width) auto var(
          --settings-item__grid-col-action
        );
    }

    &.with-note {
      grid-template-areas:
        "icon title action"
        ".    note  action";
      grid-template-columns: var(--settings-item__grid-col-icon-width) auto var(
          --settings-item__grid-col-action
        );
    }

    a:active &,
    button:active & {
      background-color: var(--secondary-item__bg-color--active);
      color: var(--secondary-item__text-color--active);
      @apply ring-inset
        ring-[length:var(--secondary-item\_\_ring-width--active)]
        ring-[color:var(--secondary-item\_\_ring-color--active)];
    }

    a:hover &,
    button:hover & {
      background-color: var(--settings-item__bg-color--hover);
      color: var(--settings-item__text-color--hover);
      @apply ring-inset
        ring-[length:var(--settings-item\_\_ring-width--hover)]
        ring-[color:var(--settings-item\_\_ring-color--hover)];
    }
  }

  .settings-item_icon-container {
    grid-area: icon;
    @apply flex items-center;
  }
  .settings-item__label {
    grid-area: title;
  }
  .settings-item-content__typography {
    font-family: var(--settings-item-content__font-family);
    font-size: var(--settings-item-content__font-size);
    line-height: var(--settings-item-content__line-height);
    letter-spacing: var(--settings-item-content__letter-spacing);
    font-weight: var(--settings-item-content__font-weight);
    color: var(--settings-item-content__text-color);
  }
  .settings-item__content {
    grid-area: content;

    @apply settings-item-content__typography;
  }
  .settings-item__content--highlight {
    color: var(--settings-item-content__text-color--highlighted);
  }
  .settings-item__forward_arrow {
    grid-area: action;
  }
  .settings-item__action {
    grid-area: action;
    align-self: stretch;
  }
  .settings-item__note {
    /* note is same as content, but placed in the different position. */
    grid-area: note;

    @apply settings-item-content__typography;
  }

  .settings-item__label {
    font-family: var(--settings-item__font-family);
    font-size: var(--settings-item__font-size);
    line-height: var(--settings-item__line-height);
    letter-spacing: var(--settings-item__letter-spacing);
    font-weight: var(--settings-item__font-weight);
  }

  .settings-item__forward_arrow {
    font-size: var(--settings-item__forward-arrow-font-size);
    color: var(--settings-item__forward-arrow-color);

    @apply flex items-center;

    &::before {
      @apply material-icons;
      @apply ltr:content-['arrow\_forward\_ios'] rtl:content-['arrow\_back\_ios'];
    }
  }

  .settings-item__icon--pale {
    @apply settings-item-icon;
    line-height: normal;
    color: var(--settings-item__icon-color--pale);
  }

  .settings-item__icon--pale {
    @apply settings-item-icon;
    line-height: normal;
    color: var(--settings-item__icon-color--pale);
  }
}
