@import '../../../../../../../scss/variables';

.sortableItem {
  @include themed() {
    padding: 15px;
    margin-bottom: 10px;
    font-size: 1.325rem;
    color: t($color) !important;
    cursor: move;
    width: 200px;
    z-index: 999 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: t($modal-secondaryColour);
    border-radius: t($borderRadius);
    box-shadow: t($boxShadow);

    svg {
      font-size: 1.3rem;
      color: t($subColor);
    }

    &:hover {
      background: t($modal-sidebarActive) !important;
    }
  }

  ul {
    -webkit-padding-start: 0;
    padding: 0;
    list-style-type: none;

    > label {
      vertical-align: middle;
    }
  }
}

.sortablecontainer {
  -webkit-padding-start: 0;
  padding: 0;
  list-style-type: none;
}

.images-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 20px;
  grid-gap: 20px;
  @include themed() {
    div {
      border-radius: t($borderRadius);
      // border: 5px t($modal-sidebar) solid;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      gap: 5px;
      position: relative;
      img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: t($borderRadius);
      }
      button {
        padding: 0 30px 0 30px;
        background: t($modal-background);
        border: none !important;
        &:hover {
          background: t($modal-sidebarActive);
        }
      }
      .tooltip {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
      }
    }
    .iconButton {
      width: calc(100% - 22px);
      margin-top: 10px;
      @include basicIconButton(11px, 1.3rem, modal);
    }
  }
}

.overviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;
}

.tabPreview {
  width: 100%;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  @include themed() {
    background: t($modal-secondaryColour);
    border-radius: t($borderRadius);
    box-shadow: t($boxShadow);
  }

  .previewContainer {
  }

  .previewItem {
    display: flex;
    flex-flow: column;
    align-items: center;
    .quotediv .quote {
      max-width: 100%;
    }

    .quotediv .author-holder .author .author-content .title {
      font-size: 1em !important;
    }
  }
}

.overviewNews {
  display: flex;
  flex-flow: column;
  margin-top: 16px;
  padding: 25px;
  .title {
    font-size: 36px !important;
    text-align: center;
  }
  .subtitle {
    font-size: 12px !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .content {
    margin: 20px 20px 0;
  }
  @include themed() {
    background: t($modal-secondaryColour);
    border-radius: t($borderRadius);
    box-shadow: t($boxShadow);
  }
}