// Name:            post
// Description:     Shows posts from users
//
// Component:       `c-post`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

.c-post {
  --img-user-size: 40px;
  border-radius: #{$global-radius};
  border: 1px solid var(--divider-color);

  &__head {
    display: grid;
    border-bottom-width: var(--divider-height);
    grid-column-gap: $margin-xsmall;
    grid-template-columns: 40px auto;
    grid-template-areas: 
      "userimg username"
      "userimg date";
  }

  &__place,
  &__body {
    flex-grow: 1;
  }

  &__user {
    width: var(--img-user-size);
    height: var(--img-user-size);
    background-color: $ui-04;
    grid-area: userimg;
  }

  &__name {
    grid-area: username;
  }

  &__date {
    grid-area: date;
  }

  &__wrapper {
    height: 100%;
    width: 100%;
    transition: width .6s ease-in-out;
    
    &:hover {
      width: 105%;
    }
  }

  &__image {
    object-fit: cover;
    height: 100%;
  }
}