mastodon/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss

.header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-primary);
}

.titleWithMenu {
  display: flex;
  align-items: start;
  gap: 10px;
}

.titleWrapper {
  flex-grow: 1;
  min-width: 0;
}

.tag {
  margin-bottom: 4px;
  margin-inline-start: -8px;
}

.name {
  font-size: 28px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.description {
  font-size: 15px;
  margin-top: 8px;
}

.headerButtonWrapper {
  display: flex;
  gap: 8px;
}

.iconButton {
  box-sizing: content-box;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--color-border-primary);
}

.authorNote {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.previewAuthorNote {
  font-size: 13px;
}

.metaList {
  --gap: 0.75ch;

  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  gap: var(--gap);
  font-size: 15px;

  & > li:not(:last-child)::after {
    content: '·';
    margin-inline-start: var(--gap);
  }
}

.columnSubheading {
  background: var(--color-bg-secondary);
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;

  &:focus-visible {
    outline: var(--outline-focus-default);
    outline-offset: -2px;
  }
}

.displayNameWithAvatar {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;

  a {
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  > :global(.account__avatar) {
    align-self: center;
  }
}

.sensitiveWarning {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 460px;
  margin: auto;
  padding: 60px 30px;
  gap: 20px;
  text-align: center;
  text-wrap: balance;
  font-size: 15px;
  line-height: 1.5;
  cursor: default;
}

.revokeControlWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: -10px;
  padding-bottom: 16px;
  padding-inline: calc(26px + var(--avatar-width)) 16px;

  :global(.button) {
    min-width: 30%;
    white-space: normal;
  }

  --avatar-width: 46px;

  @container (width < 360px) {
    --avatar-width: 35px;
  }
}