.island {
  padding: 1em 0;
  position: relative;
}

.island__header {
  min-width: 100%;
  padding: 0 1em 0.5em 0;
  margin-right: -1em;

  @media (min-width: 60em) {
    padding-right: 0;
    margin-right: 0;
  }
}

.island__row {
  min-width: 100%;
  padding: 1em 1em 1em 0;
  margin-right: -1em;
  border-bottom: 1px solid var(--color-border);

  @media (min-width: 60em) {
    padding-right: 0;
    margin-right: 0;
  }

  &:last-child { border-bottom: 0; }
}

.island__content { flex-grow: 1; }

.island__actions { align-self: center; }

/* Variants */

.island--surface {
  padding: 1em;
  background: var(--color-bg--surface);
  border-radius: 1rem;
}

.island--surface-small { padding: 0.5em; }

.island--light { background: var(--color-bg--secondary-glint); }
.island--info { background: linear-gradient(135deg, var(--color-bg--secondary) 0%, var(--color-bg--tertiary) 100%); }
.island--warning { background: linear-gradient(135deg, var(--color-bg--warning) 0%, var(--color-bg--warning-glint) 100%); }
.island--negative { background: linear-gradient(135deg, var(--color-bg--negative) 0%, var(--color-bg--negative-glint) 100%); }
.island--positive { background: linear-gradient(135deg, var(--color-bg--positive) 0%, var(--color-bg--positive-glint) 100%); }

.island--note {
  background: linear-gradient(135deg, var(--color-bg--note) 0%, var(--color-bg--note-glint) 100%);
  box-shadow: 0 3px 5px var(--color-shadow--dark);
  color: var(--color-txt);

  @media (min-width: 40em) {
    border-radius: 0.2em;
    box-shadow: 0 5px 7px var(--color-shadow);
  }

  [data-color-scheme="dark"] & {
    color: var(--color-txt--reversed);

    .txt--subtle,
    .txt--subtle\@desktop { color: var(--color-txt--reversed); }
  }
}

.island__arrow--note {
  position: relative;
  z-index: 2;
  margin-bottom: 5rem;

  &::after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: var(--color-bg--note-blend);
    border-width: 3.2rem;
    margin-left: -3.2rem;
  }
}

.island--topic-notice {
  background: var(--color-bg--note-glint);
  border-radius: 1.5em;
  margin-bottom: var(--base-space);

  @media (min-width: 60em) {
    padding: 2rem 4rem 4rem;
    margin-bottom: -4.5rem;
    border-radius: 1.5em 1.5em 0 0;
  }

  [data-color-scheme="dark"] & { color: var(--color-txt--reversed); }

  &.island--warning {
    background: var(--color-bg--warning-glint);

    [data-color-scheme="dark"] & { background: var(--color-bg--note-glint); }
  }

  &.island--positive {
    background: var(--color-bg--positive-glint);

    [data-color-scheme="dark"] & {
      color: var(--color-txt);
    }
  }

  &.island--info {
    background: linear-gradient(135deg, var(--color-bg--secondary) 0%, var(--color-bg--tertiary) 100%);

    [data-color-scheme="dark"] & {
      color: var(--color-txt);
    }
  }
}

.island--box-notice {
  margin-bottom: var(--base-space);
  margin-left: var(--negative-page-padding);
  margin-right: var(--negative-page-padding);

  @media (min-width: 40em) {
    border-radius: 1.5em;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 60em) {
    margin: 0 0 -3rem;
    border-radius: 1.5em 1.5em 0 0;
  }
}

.island--box-notice__btn {
  @media (min-width: 60em) {
    padding-top: var(--half-space);
    padding-bottom: var(--double-space);
  }
}

.island--icon {
  position: relative;
  display: flex;

  &::before {
    filter: var(--colorize-ink);
    content: "";
    min-width: 1.5em;
    width: 1.5em;
    height: 1.5em;
    background: url("/assets/icons/info-6d99e30b.svg") center center / 100% no-repeat;
    margin-right: 1em;
  }
}

.island--icon-spam::before {
  background-image: url("/assets/icons/spam-bbfc0609.svg");
}

.island--icon-feedbox::before {
  filter: var(--colorize-green);
  background: url("/assets/icons/feedbox-55ae627f.svg");
}

.island--with-rows {
  .island__header { border-bottom: 1px solid var(--color-border); }
}

.island__row--first {
  order: -1;
  border: 0;
}

.island__row--with-actions {
  display: flex;

  .island__actions {
    margin-left: 1em;
  }
}

.island--narrow\@medium {
  max-width: 55rem;
  margin-left: auto;
  margin-right: auto;
}

.island--entering {
  animation: slide-in-tilt-left 0.5s both;
  [data-turbo-preview] & {
    display: none;
    visibility: hidden;
  }
}

.island--entering-alt {
  animation: slide-in-tilt-right 0.5s both;
  [data-turbo-preview] & {
    display: none;
    visibility: hidden;
  }
}

.island--entering-untilted {
  animation: slide-in-from-bottom 0.3s both;

  [data-turbo-preview] & {
    display: none;
    visibility: hidden;
  }
}

.island--leaving {
  animation: fade-out-up 0.3s both;
  [data-turbo-preview] & {
    display: none;
    visibility: hidden;
  }
}