[data-component-id="incmty:profile"] {
  display: none;
  gap: 16px;
  align-content: space-between;

  .profile-image {
    width: 152px;
    height: 152px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 100%;
  }

  .profile-logo {
    .field--name-field-media-image {
      display: flex;
      justify-content: center;
    }

    img {
      max-height: 50px;
      max-width: 135px;
      width: auto;
    }
  }

  .company-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
  }

  .card-body {
    display: grid;
    gap: 4px;

    .name {
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 22px;
    }

    .job-position {
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 14px;
      text-transform: uppercase;
    }
  }

  .contains-modal-button {
    button.link-arrow.right {
      background-color: transparent;
      border: 0;
      cursor: pointer;
      box-shadow: none;

      &:hover {
        text-decoration: underline;
        color: var(--text-color);

        &::after {
          background-color: var(--text-color);
        }
      }
    }
  }

  .profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    border: none;
    background-color: rgba(3, 2, 25, 0.75);
    margin: 0;
    height: 100vh;
    padding: 0;
    width: 100%;

    &:focus {
      outline: none;
      box-shadow: none;
    }

    form {
      position: absolute;
      width: 48px;
      height: 48px;
      top: 0;
      right: 0;

      button {
        position: absolute;
        width: 48px;
        height: 48px;
        top: 0;
        right: 0;
        text-indent: -9999px;
        cursor: pointer;
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;

        &::after {
          content: '';
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 16px;
          height: 16px;
          background-color: var(--button-bg-color);
          mask-size: 16px 16px;
          mask-position: center;
          mask-repeat: no-repeat;
          mask-image: url(/themes/custom/incmty/images/svg/close.svg);
          background-image: none;
        }
      }
    }

    .modal-dialog {
      overflow-y: initial !important
    }

    .biography-container {
      position: absolute;
      background-color: white;
      left: 16px;
      right: 16px;
      overflow-y: hidden;
      margin: auto;
      z-index: 11;
      top: 50%;
      transform: translateY(-50%);
      padding: 48px 32px 0 32px;
      text-align: left;
      border-radius: 24px;

      .modal-body {
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 48px;

        article.align-right,
        article.align-left,
        article.align-center {
          float: none;
          display: flex;
          flex-wrap: nowrap;
          flex-direction: column;
        }

        article.align-right {
          align-items: flex-end;
        }

        article.align-left {
          align-items: flex-start;
        }

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

        &::-webkit-scrollbar {
          display: none;
        }

        .biography {
          > * {
            + * {
              margin-top: 16px;
            }
          }

          ul {
            li {
              margin-top: 8px;
            }
          }

          ol {
            li {
              margin-top: 8px;
            }
          }

          a {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 700;
            line-height: 22px;
            box-shadow: none;
            text-decoration: underline;
          }

          .field--name-field-media-document {
            span.file {
              padding-left: 0;
              background-image: none;

              .file__size {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

body:has(.profile-modal[open]) {
  overflow-y: hidden;
}

@media screen and (min-width: 1280px) {
  [data-component-id="incmty:profile"] {
    .profile-image {
      width: 200px;
      height: 200px;
    }

    .profile-modal {
      .biography-container {
        width: 824px;
      }
    }
  }
}

@media screen and (min-width: 1920px) {
  [data-component-id="incmty:profile"] {
    .profile-image {
      width: 208px;
      height: 208px;
    }

    .profile-modal {
      .biography-container {
        width: 1016px;
      }
    }
  }
}