@import '~src/assets/styles/variables';

:host {
  display: block;
  width: 100%;

  .card {
    .card-body {
      align-items: center;
      display: flex;
      height: 48px; /* Set height to maintain row UI */
      justify-content: space-between;

      .details-container {
        overflow: hidden; /* Hide content on overflow */

        > * {
          /* Show ellipsis on overflow */
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .name {
          font-weight: bold;
        }

        .url {
          font-size: 12px;
          height: 0; /* Used to hide url */
          line-height: 16px;
          opacity: 0; /* Used to fade url in */
        }
      }

      .controls-container {
        display: flex;
        opacity: .1;

        /*Kkeep spacing between controls (Ignores last control) */
        > *:not(:last-child) {
          margin-right: 4px;
        }
      }
    }

    &:hover,
    &:focus,
    &.editing {
      .card-body {
        .details-container .url {
          height: 16px; /* Transform url in */
          opacity: 1; /* Fade url in */
        }

        .controls-container {
          opacity: 1;
        }
      }
    }
  }
}
