.tracking-block-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--e-global-color-text);

  form.tracking-block-header {
    display: flex;
    gap: 8px;

    input {
      width: 100%;
      font-size: large;
      padding: 8px;
      border-radius: 8px;
    }

    button {
      background-color: var(--e-global-color-primary);
      color: white;
      border: none;
      padding: 8px 16px;
      font-size: large;
      cursor: pointer;
      transition: 0.3s all;
      border-radius: 8px;

      &:hover {
        background-color: var(--e-global-color-secondary);
      }
    }
  }

  .tracking-block-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-inline: auto;

    i {
      color: var(--e-global-color-primary);
    }
  }

  .tracking-block-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 40vh;
    overflow-y: auto;

    @media screen and (max-width: 768px) {
      max-height: 75vh;
    }

    details {
      border: 1px solid #e1e8ed;
      border-radius: 8px;

      span {
        font-size: small;
      }

      summary {
        cursor: pointer;
        padding: 16px;
        border-radius: 8px;
        transition: 0.3s all;

        &:focus {
          outline: none;
        }

        &:active {
          background-color: var(--e-global-color-secondary);
        }
      }

      &[open] {
        border-color: var(--e-global-color-primary);
        summary {
          background-color: var(--e-global-color-secondary);
        }
      }

      ul.tracking-block-details {
        display: flex;
        flex-direction: column;
        gap: 16px;
        list-style: none;
        padding: 16px;
        margin: 0;

        li:not(.tracking-block-arrow) {
          display: flex;
          gap: 8px;

          div.tracking-block-details-icon {
            display: flex;
            background-color: var(--e-global-color-primary);
            color: white;
            border-radius: 9999px;
            font-size: 16px;
            aspect-ratio: 1 / 1;
            width: 36px;
            height: fit-content;
            align-items: center;
            justify-content: center;
          }

          div.tracking-block-details-text {
            strong {
              font-family: var(--e-global-typography-primary-font-family);
              font-size: larger;
              color: var(--e-global-color-primary);
              font-weight: bold;
            }

            p {
              margin: 0;
              font-size: medium;
            }
          }
        }

        li.tracking-block-arrow {
          transform: translateY(-8px);
          color: var(--e-global-color-primary);

          &:last-child {
            display: none;
          }
        }
      }
    }
  }
}