@use '../../../../../style/globals';
@use '../../../../../style/colors';

.alias-view {
  @extend .labelled-box;

  > .showMore {
    border-radius: 4px 4px 0px 0px;
  }

  .centered {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .clickable {
    cursor: pointer;
  }

  ul.list-view {
    margin: 0;
    padding: 0;
    &:not(.wrap) {
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
    li.list-item {
      display: inline-block;
      margin-right: 3px;
      &:not(:last-child):after {
        content: none;
      }
    }
  }

  > .description-box {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: solid 1px;
    .dark & {
      border-color: colors.border-color(dark);
      border-top-color: transparent;
    }
    .light & {
      border-color: colors.border-color(light);
      border-top-color: transparent;
    }
    border-radius: 0px 0px 4px 4px;
    padding: 16px 12px;
    font-size: 16px;
  }

  .descr {
    padding: 10px;
  }

  markdown {
    p {
      padding: 0;
      margin: 0;
    }
  }
}
