@import 'variables';

img {
  &.header--item-image {
    &.user-avatar {
      align-items: center;
      display: flex;
      font-size: 0.75em;
      overflow: hidden;
    }
  }
}

.user-list {
  display: grid;
  gap: 1em;

  grid-template-columns: auto;

  @media screen and (min-width: $screen-md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: $screen-lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.user-list--user {
  border-radius: 0.4em;
  transition: all 0.2s ease;
  padding: 0.5em;

  &:hover {
    background: #eeeeee;
  }

  .username {
    font-size: 1.2em;
    word-break: break-word;
  }

  img {
    min-height: 32px;
    min-width: 32px;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .user--meta {
    display: flex;
    flex-direction: column;
  }
}


.profile-text {
  padding: 0.125em;
  line-height: 1.5;
  max-height: 500px;
  overflow: auto;
}

.user-profile-heading-container {
  align-items: center;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em;

  & > .user-profile-heading {
    flex-grow: 1;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0.5em;

    &:not(:last-child) {
      padding-right: 0;
    }
  }

  & > .button:last-child {
    margin-right: 0;
  }
}
.user-profile--image {
  text-align: center;

  img {
    width: 100%;
    object-fit: contain;
  }
}

@media all and (max-width: 64em) {
  .profile-text {
    max-height: none;
  }
}

.staff-badge {
  display: inline-block !important;
  padding: 3px 6px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}


.user-card {
  display: flex;

  &.deleted-content {
    padding: 0.5rem;
  }

  .user-card--avatar {
    align-self: flex-start;
    padding: 0 0.5rem;
    padding-left: 0;
    flex-grow: 0;
    margin-top: auto;
    margin-bottom: auto;

    .avatar--deleted {
      font-size: 36px;
      padding: 8px;
      display: inline-block;
    }
  }

  .user-card--content {
    padding: 0 0.25rem;

    .user-card--link {
      display:inline-block;
      max-width: 420px;

      &-small {
        display:inline-block;
        max-width: 180px;
      }
    }

    .user-card--meta {
      font-size: 0.85em;
      color: #666;
      display: flex;
      flex-wrap: wrap;

      .user-card--break {
        flex-grow: 1;
        width: 100%;
      }
      .user-card--detail {
        margin-top: 0.125rem;
        margin-right: 0.35rem;

        .fa-fw {
          font-size: 0.8em;
        }
      }
    }
  }

  img {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
}

.user-pref {
  border: 1px solid $muted-graphic;
  border-radius: 0.3em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1em;
  margin: 0.5em 0;

  .user-pref--meta .desc {
    color: $muted-text;
    font-size: 0.8em;
  }
}

$sizes: (16, 32, 40, 48, 64, 128, 256);

@each $size in $sizes {
  .avatar-#{$size} {
    max-width: #{$size}px;
    max-height: #{$size}px;
  }
}

.deleted-user-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.user-vote-summary {
  border: none !important;

  summary {
    margin: 0 !important;
    background-color: #eef1f2;
    border: none;
    border-radius: 5px;

    &:before {
      top: 16px;

      transition: none;
    }

    h2 {
      width: 100%;
    }
  }

  &[open] summary::before {
    top: 13px;
  }


  .item-list--item {
    padding: 0 !important;

    .item-list--number-value {
      width: 60px !important;
    }

    .grid {
      align-items: center;
    }
  }
}
