@use "sass:meta";

:host {
  --provider-logo-width: 48px;
  --provider-logo-height: 22px;
  --modal-logo-width: 152px;
  --modal-logo-height: 48px;
}

svg {
  vertical-align: middle;
}

@include meta.load-css("../_helpers/flex");

.modal {
  width: 90vw;
  height: 90vh;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-surface-primary);
  border: var(--border-width-sm) solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  gap: var(--scale-600);
  padding: var(--scale-600) var(--scale-900);

  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--typography-size-body-md);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-md);
  letter-spacing: var(--font-letter-spacing-default);

  .topbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--scale-400);

    tems-button:nth-child(2) {
      margin-left: auto;
    }
  }

  .modal-content-wrapper {
    overflow: hidden;
    flex: 1;
    display: flex;

    .modal-box {
      flex: 1;
      display: flex;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .modal-content {
      display: flex;
      flex-direction: column;
      gap: var(--scale-400);
      height: fit-content;
      width: 100%;
    }

    .provider-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;

      > div {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }

    .provider-logo {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: var(--provider-logo-width);
      height: var(--provider-logo-height);
    }

    .default-image-grid {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .default-img {
      max-width: 100%;
      max-height: 10vh;
      width: max-content;
    }

    tems-division {
      width: fit-content;
      div {
        display: block;
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    a {
      margin: 0px;
    }

    a:has(svg) {
      display: flex;
      flex-direction: row;
      gap: var(--typography-spacing-xs);
      align-items: center;

      svg {
        display: flex;
        width: 20px;
        height: 20px;
        color: var(--color-icon-information);
      }
    }

    .badges {
      display: flex;
      gap: var(--scale-200);
      flex-direction: row;
      flex-wrap: wrap;
      padding: 8px;
    }

    .badges:has(+ .badges) {
      padding-right: 0;
    }

    .badges + .badges {
      padding-left: 0;
    }

    .metadata-section {
      border-top: var(--border-width-sm) solid var(--color-border-primary);
      padding-top: --scale-200;
      gap: var(--scale-400);
      tems-division[type="h2"] {
        padding-top: var(--scale-400);
      }
      .metadata-provider {
        gap: var(--scale-400);
      }
    }
  }

  > .modal-content-wrapper:has(iframe, .main-img) {
    flex-direction: row;
    gap: var(--scale-900);
    iframe,
    .main-img {
      width: 50%;
      min-width: 50%;
      padding: var(--scale-600);
      background-repeat: no-repeat;
      background-position: top;
      background-size: 100%;
      > div[style] {
        border-radius: var(--border-radius-lg);
        border: var(--border-width-sm) solid var(--color-border-primary);
      }
    }

    iframe {
      border-radius: var(--border-radius-lg);
      border: var(--border-width-sm) solid var(--color-border-primary);
    }

    .logo {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: var(--modal-logo-width);
      height: var(--modal-logo-height);
    }
  }

  .modal-content-wrapper:not(:has(iframe, .main-img)) {
    flex-direction: column;
  }

  .case-2,
  .case-3,
  .case-4 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50%;
    gap: var(--scale-400);
    * {
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .full-width {
      flex-grow: 1;
      width: 100%;
      border-radius: var(--border-radius-md);
      border: var(--border-width-sm) solid var(--color-border-primary);
    }
    .img-inner-row {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      gap: var(--scale-400);
      .double-image {
        display: flex;
        gap: var(--scale-400);
        > div {
          flex: 1;
          width: 100%;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          border-radius: var(--border-radius-md);
          border: var(--border-width-sm) solid var(--color-border-primary);
        }
      }
    }
  }
  .case-3 {
    .double-image {
      width: 100%;
      flex-direction: row;
    }
  }
  .case-4 {
    .img-inner-row {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      gap: var(--scale-400);
      .double-image {
        width: 50%;
        flex-direction: column;
      }
      .last-img {
        width: 50%;
        margin-right: auto;
        flex: 1;
        height: 100%;
        border-radius: var(--border-radius-md);
        border: var(--border-width-sm) solid var(--color-border-primary);
      }
    }
  }

  .multiple-columns {
    gap: var(--scale-800);

    > .half {
      gap: var(--scale-400);
      &:empty {
        display: none;
      }
    }
  }

  .badge-row {
    gap: var(--scale-200);
  }
  .assets-rows {
    gap: 0px;
    .asset-row {
      text-overflow: ellipsis;
      background-color: var(--color-surface-primary);
      color: var(--color-text-body);
      border: var(--border-width-sm) solid var(--color-border-primary);
      border-bottom: 0px;
      padding: var(--scale-200);
      gap: var(--scale-300);
    }
    p {
      margin: 0px;
      font-family: var(--font-family-body);
      font-size: var(--typography-size-body-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-body-sm);

      overflow: hidden;
      text-overflow: ellipsis;
    }
    .asset-row:first-of-type {
      border-radius: var(--border-radius-xl) var(--border-radius-xl) 0px 0px;
    }
    .asset-row:last-of-type {
      border-radius: 0px 0px var(--border-radius-xl) var(--border-radius-xl);
      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
    }

    .asset-row:only-of-type {
      border-radius: var(--border-radius-xl);
      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
    }
    .asset-format {
      width: 40px;
      min-width: 40px;
      height: 48px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 6px;
      background-color: var(--color-surface-disabled);
      border-radius: var(--border-radius-md);
      p {
        font-size: var(--typography-size-body-xs);
        font-weight: var(--font-weight-bold);
        text-transform: low ercase;
      }
    }
    .flex-column {
      overflow: hidden;
    }
  }

  .metadata-section .half:empty {
    display: none;
  }
}

@media screen and (min-width: 1100px) {
  div.modal {
    width: 80vw;
    height: 80vh;
  }
}