@import "variables";

:host {
  .header {
    width: 100%;
    margin-bottom: 6px;
    color: $blue-100;
   }

  .al-ico-copy-to-clipboard {
    color: $blue-300;
    opacity: 0;
    transition: opacity 0.3s;
    &:hover {
      color: $blue-100;
    }
  }

  .value:hover {
    .al-ico-copy-to-clipboard {
      opacity: 1;
    }
  }

  .section {
    .param {
      &.continue {
        border-bottom: unset;
      }

      .comment {
        color: $blue-300;
        margin-left: 4px;
      }

      .multi-line-value {
        flex: 1 1 0;
        color: $blue-100;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: pre-line;
      }
    }
    .al-ico-edit {
      color: $blue-300;
      opacity: 0;
      transition: opacity 0.3s;
      cursor: pointer;
      &:hover {
        color: $blue-100;
      }
    }

    &:hover {
      .al-ico-edit {
        opacity: 1;
      }
    }
  }
}
