@import "./variables";
@import '~bootstrap/scss/bootstrap.scss';

.svg-inline--fa,
.with-emoji .emoji {
  max-width: 1em;
  max-height: 1em;
  height: 2em;

  &.margin-right {
    margin-right: 0.5em;
  }

  &.margin-left {
    margin-left: 0.5em;
  }
}

.software-name > .icon {
  max-width: 1.5em;
  max-height: 1.5em;
  padding-right: 0.5em;
}

.navbar {
  .navbar-brand {
    .logo {
      height: 1.5rem;
      margin-right: 0.5rem;
    }
  }
}

table.stats {
  .software-name {
    .icon {
      max-height: 2em;
      max-width: 2em;
    }
  }

  .progress {
    height: 0.5em;
  }
}


.feed .card-body{
  text-align: left;
  display: grid;
  grid-template-columns: [start] min(15%) [main] auto [end];
  grid-template-rows: [start] auto [address] auto [software] auto [badges];
  column-gap: 1em;
  row-gap: 1em;

  > * {
    align-self: start;
  }

  .avatar {
    width: 100%;
    grid-column: start /main;
    grid-row: span 4;
    border-radius: $border-radius;
  }


  .display-name {
    grid-column: main / end;
    grid-row: start;
    margin: 0;
  }

  .address {
    grid-column: main / end;
    grid-row: address;
  }

  .parent-feed{
    position: relative;
    .avatar{
      max-width: 3em;
      float: left;
      margin-right: 1em;
    }
  }

  .software-name{
    grid-column: main /end;
    grid-row: software;
  }

  .badges {
    grid-column: main /end;
    grid-row: badges;

    .badge{
      margin-right: 0.5em;
    }
  }

  .fields {
    grid-column: start / end;
    grid-row: span 1;
  }

  .description {
    grid-column: start/end;
    grid-row: span 1;
    overflow-y: auto;

    p {
      margin: 0 0 1em 0;

      &:last-child {
        margin: 0;
      }
    }

  }

  @media (max-width: 640px) {
    .display-name {
      grid-column-start: start;
    }
    .address {
      grid-column-start: start;
      margin-top: -1em;
    }
    .badges{
      margin-top: -1em;
    }
    .avatar {
      grid-row-start: software;
      grid-row: span 2;
    }
  }
}

.placeholder-wrapper{
  cursor: wait;
}