@use '../../globalStyles/mixins' as m;
@use '../../globalStyles/variables' as v;

.about-me-container {
  padding: 0 1rem;
  margin-bottom: 5rem;
  user-select: none;

  .personal-infos {
    display: flex;
    margin-bottom: 3rem;

    .profile-image {
      width: 17rem;
      min-width: 17rem;
      height: 17rem;
      display: flex;
      background: black;
      border-radius: v.$border-radius;
      box-shadow: v.$box-shadow;

      img {
        object-fit: contain;
        border-radius: v.$border-radius;
        width: 100%;
        height: auto;
        border: 1px solid m.color(grey-0);
        box-shadow: v.$box-shadow;
      }
    }

    .detail-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 2rem;

      .details {
        display: block;

        .detail {
          width: 100%;
          display: block;
          line-height: 2;
          margin-bottom: 0.5rem;
          transition: all 200ms ease-in-out;
          cursor: pointer;

          img {
            object-fit: contain;
            width: 1.5rem;
            height: auto;
            margin-right: 0.5rem;
          }

          .category {
            @include m.tag-yellow;
          }

          .about {
            margin-left: 0.875rem;
          }

          &:hover {
            color: m.color(primary);
          }
        }

        .flex {
          display: flex;
          align-items: baseline;
          justify-content: flex-start;
        }

        .name {
          font-size: m.size(large-4);
          font-weight: m.weight(black);
          display: inline-block;
          margin-bottom: 1.25rem;
          position: relative;

          &::after {
            @include m.underline;
          }
        }

        #email {
          position: relative;
        }

        .alert {
          font-size: m.size(small-3);
          font-weight: m.weight(light-bold);
          color: m.color(alert);
          border: 1px solid;
          border-radius: v.$border-radius;
          position: absolute;
          top: 7px;
          padding: 0px 5px;
          margin-left: 0.5rem;
        }

        .alert-enter {
          opacity: 0;
        }

        .alert-enter-active {
          opacity: 1;
          transition: opacity 200ms;
        }

        .alert-exit-active {
          opacity: 0;
          transition: opacity 200ms;
        }
      }
    }
  }

  .introduce {
    .subtitle {
      @include m.subtitle;
      border-radius: 0;
      box-shadow: none;
      padding: 0.225rem 1rem;
      margin-bottom: 0.5rem;
    }

    .about {
      h1 {
        font-size: m.size(large-2);
        font-weight: m.weight(light-bold);
      }

      h2 {
        font-size: m.size(large-1);
        font-weight: m.weight(light-bold);
      }

      h3 {
        font-size: m.size(large-0);
        font-weight: m.weight(light-bold);
        margin-left: 1rem;
      }

      a {
        color: m.color(primary);

        &:hover {
          font-weight: m.weight(light-bold);
        }
      }

      ul {
        & > li {
          margin: 0.25rem 1.125rem;

          &::before {
            content: '';
            height: 20px;
            width: 20px;
            vertical-align: middle;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            background-image: url('../../assets/static/images/check-mark.png');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        & > customli {
          display: block;
          margin: 0.25rem 1.125rem;

          &::before {
            content: '';
            height: 20px;
            width: 20px;
            vertical-align: middle;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            background-image: url('../../assets/static/images/check-light.png');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }

      ol {
        counter-reset: number-counter;

        li {
          margin: 0.25rem 0;
          counter-increment: number-counter;
          vertical-align: middle;
          line-height: 1.5;

          &::before {
            content: '0' counter(number-counter);
            position: relative;
            display: inline-block;
            text-align: center;
            font-size: m.size(small-0);
            font-weight: m.weight(light-bold);
            color: m.color(primary);
            margin-right: 0.375rem;
            padding: 0 0.225rem;
            background-color: m.color(primary-opacity-heavy);
            border-radius: v.$border-radius;
          }
        }
      }

      strong {
        background-color: m.color(primary-opacity-heavy);
        padding: 0 0.225rem;
        color: m.color(main);
      }

      boldred {
        background-color: m.color(alert-opacity);
        padding: 0 0.225rem;
        color: m.color(main);
        font-weight: m.weight(semi-bold);
      }

      boldblue {
        background-color: m.color(dark-event-opacity);
        padding: 0 0.225rem;
        color: m.color(main);
        font-weight: m.weight(semi-bold);
      }

      boldgreen {
        background-color: m.color(safe-opacity);
        padding: 0 0.225rem;
        color: m.color(main);
        font-weight: m.weight(semi-bold);
      }

      code {
        vertical-align: middle;
        background-color: m.color(grey-0);
        border-radius: 6px;
        font-size: m.size(small-0);
        font-weight: m.weight(medium);
        color: m.color(grey-10);
        display: inline-block;
        padding: 0.2em 0.4em;
        margin: 0 0 0.225rem 0.125rem;
        height: fit-content;

        &:first-child {
          margin: 0 0 0.125rem 0;
        }
      }

      p {
        margin-bottom: 5px;
      }

      blockquote {
        position: relative;
        margin: 0.825rem 0;
        color: m.color(grey-9);
        padding: 0.5rem 0.25rem;
        position: relative;
        padding-left: 1.5rem;
        padding: 0.75rem 1.5rem;
        background: m.color(grey-light);

        &::before {
          content: '';
          width: 5px;
          height: 100%;
          background: #ccd5dd;
          position: absolute;
          top: 0;
          left: 0;
          display: block;
        }
      }
    }

    .about {
      padding: 0 0 0 1.5rem;
    }
  }
}

@include m.mobile-down {
  .about-me-container {
    margin-bottom: 1rem;

    .introduce {
      .about {
        padding: 0 0 0 0.5rem;
      }
    }

    .personal-infos {
      display: block;

      .profile-image {
        width: 50%;
        min-width: 13rem;
        height: auto;
      }

      .detail-wrapper {
        padding-left: 1rem;
        margin-top: 1rem;

        .details {
          .flex {
            display: inline-grid;

            a {
              margin: 0.5rem 0 0.5rem 1rem;
              word-break: break-all;
              line-height: 1;
              font-size: m.size(small-0);
            }
          }

          #email {
            margin: 0.5rem 0 0.5rem 1rem;
            word-break: break-all;
            line-height: 1;
            font-size: m.size(small-0);

            span {
              display: inline-block;
              margin: 0 0 0 0.225rem;
              width: fit-content;
              padding: 2px;
              top: 1px;
            }
          }
        }
      }
    }
  }
}

@include m.mobile {
  .about-me-container {
    margin-bottom: 1rem;

    .introduce {
      .about {
        padding: 0 0 0 0.5rem;
      }
    }

    .personal-infos {
      display: block;

      .profile-image {
        width: 50%;
        min-width: 13rem;
        height: auto;
      }

      .detail-wrapper {
        padding-left: 1rem;
        margin-top: 1rem;

        .details {
          .flex {
            display: inline-grid;

            a {
              margin: 0.225rem 0 0 1rem;
            }
          }

          #email {
            margin: 0.225rem 0 0 1rem;
          }
        }
      }
    }
  }
}
