:host {
  display: block;
}

.hy-list-item {
  display: flex;
  font-family: var(--main-font-family);
  text-decoration: none;

  &__default {
    margin-bottom: 28px;
    @include breakpoint($wide) {
      margin-bottom: 32px;
    }

    &__info-container {
      &__header {
        @include font-size(12px, 14px);
        color: var(--grayscale-dark);
        letter-spacing: 0;
        margin-bottom: 4px;

        @include breakpoint($narrow) {
          @include font-size(14px, 18px);
          margin-bottom: 2px;
        }
      }

      &__title {
        @include font-size(18px, 22px);
        @include font-weight($bold);
        color: var(--brand-main-light);
        letter-spacing: -0.56px;
        margin-bottom: 6px;

        @include breakpoint($narrow) {
          @include font-size(22px, 28px);
          letter-spacing: -0.69px;
          margin-bottom: 10px;
        }
        @include breakpoint($xlarge) {
          @include font-size(26px, 32px);
          letter-spacing: -0.8px;
          margin-bottom: 8px;
        }
      }

      &__link-container {
        align-items: center;
        display: flex;
        margin-bottom: 6px;

        @include breakpoint($narrow) {
          margin-bottom: 8px;
        }
      }

      &__link {
        @include font-size(12px, 16px);
        color: var(--grayscale-dark);
        letter-spacing: -0.07px;
        margin-left: 4px;

        @include breakpoint($narrow) {
          margin-left: 5px;
        }

        &__icon {
          svg {
            fill: var(--grayscale-dark);
          }
        }
      }

      &__description {
        @include font-size(14px, 20px);
        color: var(--grayscale-black);
        letter-spacing: 0;

        @include breakpoint($narrow) {
          @include font-size(16px, 24px);
        }
      }
    }
  }

  // Degree programmes.
  &__degree {
    background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
    flex-direction: column;
    @include breakpoint($narrow) {
      flex-direction: row;
    }

    &__image-container {
      display: block;
      min-width: 100%;
      position: relative;
      width: 100%;

      @include breakpoint($narrow) {
        min-width: 24%;
        width: 24%;
      }

      &__image {
        vertical-align: bottom;
        max-width: 100%;
        height: 100%;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      span {
        @include font-weight($semibold);
        @include font-size(12px, 14px);
        background-color: var(--additional-yellow);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
        color: var(--grayscale-black);
        left: -4px;
        letter-spacing: -0.07px;
        padding: 8px 5px;
        position: absolute;
        top: 16px;
        text-transform: uppercase;

        @include breakpoint($narrow) {
          left: -8px;
        }
        @include breakpoint($wide) {
          top: 22px;
        }
      }
    }

    &__info-container {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 12px;
      position: relative;

      // 960-1600 with Sidebar;
      @include breakpoint($wide) {
        padding: 12px 16px;
      }
      // >1600 with sidebar same as >1200 without sidebar
      @include breakpoint($xlarge) {
        padding: 20px 24px;
      }

      &__data {
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
      }

      // >1200 no sidebar;
      &__large {
        @include breakpoint($extrawide) {
          padding: 20px 24px;
        }
      }

      &__title {
        @include font-size(18px, 22px);
        @include font-weight($bold);
        color: var(--link-blue);
        letter-spacing: -0.54px;
        margin-bottom: 8px;

        // 960-1600 with Sidebar;
        @include breakpoint($wide) {
          @include font-size(18px, 24px);
          letter-spacing: -0.5px;
        }

        // >1600 with sidebar same as >1200 without sidebar
        @include breakpoint($xlarge) {
          @include font-size(20px, 26px);
          letter-spacing: -0.6px;
        }

        &__large {
          // >1200 no sidebar;
          @include breakpoint($extrawide) {
            @include font-size(20px, 26px);
            letter-spacing: -0.6px;
          }
        }
      }

      &__description {
        @include font-size(14px, 18px);
        color: var(--grayscale-dark);
        letter-spacing: 0;
        margin-bottom: 16px;

        @include breakpoint($narrow) {
          margin-bottom: 12px;
        }
        // 960-1600 with Sidebar;
        @include breakpoint($wide) {
          letter-spacing: -0.2;
        }
        // >1600 with sidebar same as >1200 without sidebar
        @include breakpoint($xlarge) {
          @include font-size(16px, 20px);
          letter-spacing: -0.25px;
        }

        &__large {
          // >1200 no sidebar;
          @include breakpoint($extrawide) {
            @include font-size(16px, 20px);
            letter-spacing: -0.25px;
          }
        }
      }

      &__additional-info {
        &__item {
          @include font-size(12px, 16px);
          @include font-weight($light);
          align-items: center;
          color: var(--grayscale-black);
          display: flex;
          flex-direction: row;
          letter-spacing: -0.2px;
          margin-bottom: 4px;

          @include breakpoint($xlarge) {
            @include font-size(14px, 16px);
          }
          // >1200 no sidebar;
          &__large {
            @include breakpoint($extrawide) {
              @include font-size(14px, 16px);
            }
          }
        }
        &__item.active::before {
          content: ' ';
          box-sizing: border-box;
          height: 14px;
          width: 14px;
          border: 3px solid #ffffff;
          border-radius: 4px;
          background-color: #f9a21a;
          left: -7px;
          position: absolute;

          @include breakpoint($narrow) {
            border: none;
            border-radius: 4px;
            height: 8px;
            margin-right: 6px;
            width: 8px;
            left: 0;
            position: relative;
          }
        }
      }

      &__outgoing-link {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 16px;

        a {
          align-items: center;
          bottom: 12px;
          display: flex;
          flex-direction: row;
          position: absolute;
          right: -6px;
          text-decoration: none;

          .label {
            @include font-size(14px, 16px);
            @include font-weight($bold);
            color: var(--link-blue);
            letter-spacing: -0.5px;
            margin-right: 8px;
            text-align: right;
          }

          .icon-wrapper {
            background-color: var(--brand-main-light);
            z-index: 10;

            .icon {
              position: relative;
              overflow: hidden;

              svg {
                background-color: transparent;
                box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
                fill: var(--grayscale-white);
                padding: 6.4px;

                @include breakpoint($xlarge) {
                  height: 36px;
                  width: 36px;
                  padding: 7.2px;
                }
              }
            }
          }
        }

        // >1200 no sidebar;
        &__large {
          svg {
            @include breakpoint($extrawide) {
              height: 36px;
              width: 36px;
              padding: 7.2px;
            }
          }
        }
      }
    }
  }
}

.hy-list-item-wrapper {
  font-family: var(--main-font-family);

  &__degree {
    margin-bottom: 16px;
    @include breakpoint($narrow) {
      flex-direction: row;
      margin-bottom: 24px;
    }
    @include breakpoint($wide) {
      margin-bottom: 28px;
    }
    @include breakpoint($xlarge) {
      margin-bottom: 32px;
    }
    // >1200 no sidebar;
    &__large {
      @include breakpoint($extrawide) {
        margin-bottom: 32px;
      }
    }

    &__related-info {
      background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);
      margin-top: 4px;
      padding: 0 12px 0 16px;

      @include breakpoint($narrow) {
        padding: 0 24px 0 16px;
      }
      @include breakpoint($wide) {
        margin-top: 6px;
        padding: 0 24px 0 24px;
      }
      @include breakpoint($xlarge) {
        margin-top: 8px;
      }
      // >1200 no sidebar;
      &__large {
        @include breakpoint($extrawide) {
          margin-top: 8px;
        }
      }

      &__heading {
        &__link {
          text-decoration: none;
        }

        &__button {
          @include font-size(12px, 16px);
          align-items: center;
          background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);
          border: none;
          color: var(--grayscale-black);
          display: flex;
          flex-direction: row;
          font-family: var(--main-font-family);
          letter-spacing: -0.2px;
          height: 100%;
          padding: 8px 0;
          width: 100%;

          @include breakpoint($narrow) {
            @include font-size(12px, 20px);
            padding: 14px 0;
          }
          @include breakpoint($wide) {
            @include font-size(14px, 20px);
            letter-spacing: -0.4px;
            padding: 18px 0;
          }

          &:hover {
            cursor: pointer;
          }

          &__is-open {
            svg {
              transform: rotate(180deg);
            }
          }
        }

        &__icon {
          margin-right: 0.5rem;
          z-index: 0;

          @include breakpoint($wide) {
            margin-right: 12px;
          }

          svg {
            fill: var(--brand-main);
            height: 14px;
            width: 14px;

            @include breakpoint($wide) {
              height: 18px;
              width: 18px;
            }
          }
        }
      }

      &__content {
        display: none;

        &__is-open {
          border-top: 1px solid #d2d2d2;
          display: flex;
          flex-direction: column;
          padding: 20px 8px 5px 8px;

          @include breakpoint($wide) {
            padding: 20px 0 14px 0;
          }
        }
      }

      &__link {
        @include font-size(14px, 16px);
        @include font-weight($bold);
        color: var(--link-blue);
        letter-spacing: -0.4px;
        margin-bottom: 16px;
        text-decoration: none;
      }
    }
  }
}