@import "../../../../assets/scss/variable";
@import "../../../../assets/scss/mixin.scss";

.profile {
  @include pageContainer;

  &__title {
    @include pageHeader;
  }

  &__card {
    @include cardContainer;

    &__header {
      @include header-icon;
      background: none;
      box-shadow: none;
      padding: 0;

      &__avatar {
        width: 65px;
        height: 65px;
        border: 1px solid $orange-2-color;
        border-radius: 5px;
        box-shadow: 0px 3px 6px $orange-2-shadow;
      }
    }

    &__title {
      @include title;

      &__subtitle {
        @include subtitle;
      }
    }

    &__content {
      padding: 0;
      @include tableContainer;

      &__title {
        font-size: 18px;
        color: $dark-grey-color;
        font-weight: lighter;
        padding: 16px 16px;
      }

      &__container {
        max-height: 65vh;
        overflow-y: auto;
        margin: 2px;
      }

      &__table {
        width: 100%;
        font-weight: lighter;

        &__title {
          min-width: 15vw;

          &__main {
            padding-right: 5px;

            &__event {
              overflow-wrap: break-word;
              margin-right: 10px;
            }
          }
        }

        &__icon {
          min-width: 1vw;
        }

        @media (max-width: $breakpoint-md) {
          &__title {
            color: $dark-grey-color;

            &__main {

              &__event {
                overflow-wrap: break-word;
                width: 40vw;
                margin-right: 10px;
              }
            }
          }
        }

        @media (max-width: 767px) {
          &__title {
            @include ellipsisText;
            color: $dark-grey-color;
            margin-right: 10px;

            &__main {

              &__title {
                @include ellipsisText;
                color: $dark-grey-3-color;
                width: 40vw;
              }

              &__event {
                @include ellipsisText;
                width: 30vw;
              }
            }
          }
        }

        @media (max-width: $breakpoint-xs) {
          &__title {
            width: 80vw;

            &__main {

              &__title {
                width: 80vw;
              }

              &__event {
                width: 80vw;
              }
            }
          }
        }
      }
    }
  }
}
