.LinkCarousel {
  background: var(--color-gray1);
  display: flex;
  margin-left: calc(0px - var(--gap-xl));
  margin-right: calc(0px - var(--gap-xl));
  overflow-x: auto;
  padding: var(--gap-l);
}

.LinkCarousel-title {
  background: var(--color-gray1);
  font-weight: bold;
  margin-left: calc(0px - var(--gap-xl));
  margin-right: calc(0px - var(--gap-xl));
  padding: var(--gap-l) var(--gap-l) var(--gap-xs);
}

.LinkCarousel-group {
  padding-right: var(--gap-l);

  &:not(:first-child) {
    margin-left: calc(var(--gap-m) - var(--gap-l));
  }

  > h3 {
    display: none;
  }

  > ul {
    display: flex;
    height: 100%;
  }
}

.LinkCarousel-item {
  --size: calc(
    var(--gap-l) * 2 + var(--iconSize-xl) + var(--gap-s) * 2 - 2px +
      var(--lineHeight-s)
  );

  background: var(--color-white);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  min-height: var(--size);
  padding: var(--gap-s) var(--gap-m);
  position: relative;
  width: var(--size);

  &:not(:first-child) {
    margin-left: var(--gap-m);
  }

  &:not(.is-image) {
    > .Link {
      padding-right: var(--gap-l);
    }
  }

  > .Link {
    .Text.is-s;

    display: block;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
  }

  &:hover {
    box-shadow: var(--shadow-2);
  }
}

.LinkCarousel-item-favorite {
  .IconButton;

  --IconButton-name: 'star';
  --Icon-size: var(--iconSize-xs);

  position: absolute;
  right: 0;
  top: 0;

  &.is-unstarred {
    --IconButton-name: 'star_border';

    opacity: 0;
  }

  &::before {
    transform: unset;
  }
}

.LinkCarousel-item:focus-within .LinkCarousel-item-favorite.is-unstarred,
.LinkCarousel-item:hover .LinkCarousel-item-favorite.is-unstarred {
  opacity: 1;

  &::before {
    --Icon-fill: 'FILL' 0;
  }
}

.LinkCarousel-item.is-image {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  position: relative;

  &::before {
    .Icon;

    align-items: center;
    color: var(--Link-color);
    content: 'add_circle_outline';
    display: flex;
    flex: 1;
    font-size: var(--iconSize-xl);
    justify-content: center;
    padding: var(--gap-s) 0 calc(var(--gap-s) - 2px) 0;
    top: 0;
  }

  &:hover::before {
    color: var(--Link-hoverColor);
  }

  &[data-icon-name]::before {
    content: attr(data-icon-name);
  }

  > .Link {
    border-top: 2px solid var(--color-dominant6);
    height: auto;
    padding-top: calc(var(--gap-s) - 2px);
    text-align: center;
    width: 100%;
  }
}

// Legacy.
.p-commonContent-new > form {
  display: none;
}
