.StyleEmbeddedContent {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--Page-headerBottom) - var(--Popup-gap) * 2);
  margin: calc(0px - var(--gap-l));
  position: relative;

  .StyleEmbeddedContent-heading {
    .Text.is-s;

    font-weight: bold;
    margin: var(--gap-l) 0;
    padding-top: var(--gap-s);
  }
}

.StyleEmbeddedContent-content {
  overflow: auto;
  width: 100%;
}

.StyleEmbeddedContent-nav {
  background: var(--color-white);
  border-right: 1px solid var(--color-gray2);
  padding: var(--gap-l);
  width: 100%;

  .StyleEmbeddedContent-search {
    .SearchInput;

    input {
      margin-bottom: var(--gap-m);
    }
  }

  li {
    border-top: 1px solid var(--color-gray3);
    color: var(--color-dominant6);
    cursor: pointer;
    position: relative;

    > a {
      display: block;
      padding: var(--gap-m) 0;
      width: 100%;
    }

    &:hover,
    &.is-selected {
      color: var(--Link-hoverColor);

      &::after {
        bottom: 0;
        content: '';
        left: calc(0px - var(--gap-l));
        position: absolute;
        top: 0;
        width: var(--gap-m);
      }
    }

    &:hover::after {
      background: var(--Link-hoverColor);
    }

    &.is-selected::after {
      background: var(--color-dominant6);
    }

    &:first-child {
      border-color: transparent;
    }
  }
}

.StyleEmbeddedContent-main {
  padding: 0 var(--gap-l) calc(var(--gap-l) * 6) var(--gap-l);
  width: 100%;

  .LinkTable.StyleEmbeddedContent-items {
    display: block;
    margin: 0;

    > li {
      width: 100%;
    }
  }

  .StyleEmbeddedContent-items {
    display: flex;
    flex-wrap: wrap;
    margin: calc(0px - var(--gap-l) / 2);

    > li {
      padding: calc(var(--gap-l) / 2);
      width: 50%;
    }
  }

  .StyleEmbeddedContent-warning {
    display: none;
    margin-top: var(--gap-l);
  }
}

.Widget-title {
  flex-shrink: 0;
}

@media (@mq-m) {
  .StyleEmbeddedContent-nav {
    height: 100%;
    max-width: 250px;
    overflow-y: scroll;
    width: 35%;
  }

  .StyleEmbeddedContent-content {
    display: flex;
    height: 100%;
  }

  .StyleEmbeddedContent-main {
    height: 100%;
    overflow-y: scroll;
  }
}

.Widget[name='AddEmbeddedContent'] {
  height: 100%;
}
