.texts-ui {

  height: 100%;

  .loader-icon {
    width: 24px;
    margin: 0 auto;
    margin-top: 50px;
  }

  &>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;

    >div {
      text-align: left;
    }

    .load {
      text-align: center;
    }


    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: var(--spacing-05);
      position: relative;
      z-index: 20;

      h1 {
        font-size: 1rem;
      }
    }

    button.back {
      padding: var(--spacing-05) var(--spacing-05);
      display: flex;
    }

    .right {
      display: flex;
      gap: var(--spacing);
    }

    .scroll {
      height: 100%;
      overflow: auto;
    }

    &[data-hidden="true"] {
      display: none;
    }

    &.texts-list {
      .texts {
        display: flex;
        flex-direction: column;
        gap: var(--spacing);
        padding: var(--spacing-05);
        height: 100%;
        overflow: auto;

        .text-item {
          align-items: center;
          gap: 5px;
          padding: var(--spacing);
          border-radius: var(--radius);
          background-color: var(--bg3);
          cursor: pointer;
          flex-wrap: wrap;
          user-select: none;
          -webkit-user-select: none;

          h3,
          p {
            margin: 0;
          }

          p {
            text-wrap: none;
            white-space: nowrap;
            overflow: hidden;
          }

          &:hover {
            background-color: var(--bg4);
          }
        }
      }
    }

    &.text {

      .books {
        display: flex;
        flex-direction: row;
        padding: var(--spacing-05);
        height: 100%;
        flex-wrap: wrap;

        .book {
          width: 33%;
          padding: var(--spacing-05);
          user-select: none;
          -webkit-user-select: none;
          cursor: pointer;
          flex-grow: 1;

          h3 {
            padding: var(--spacing);
            background-color: var(--bg3);
            border-radius: var(--radius);
            margin: 0;

            .chapters {
              opacity: 0.5;
              float: right;
              display: none;
            }

            &:hover {
              background-color: var(--bg4);
            }

          }

        }
      }
    }

    &.book-item {
      .chapter {
        h3 {
          position: sticky;
          top: 0;
          z-index: 10;
          background-color: var(--bg1);
          margin: 0;
          margin-top: var(--spacing-2);
          text-align: center;
        }
      }

      .book-content {
        margin-top: -7px;
      }

      .verse {
        position: relative;
        padding-left: 20px;

        .verse-number {
          left: 0;
          top: 3px;
          position: absolute;
          user-select: none;
          -webkit-user-select: none;
          font-size: 0.6rem;
          opacity: 0.8;
        }

        &[data-selected="true"] {
          color: var(--primary);
          font-weight: 600;
        }
      }
    }
  }


  &[data-right-align="true"] {
    &>div {
      &.book-item {
        .verse {
          direction: rtl;
          unicode-bidi: isolate;
          text-align: right !important;
          padding-left: 0;
          padding-right: 20px;

          .verse-number {
            left: unset;
            right: 0;
          }
        }

      }
    }
  }
}



@media (max-width: 600px) {

  .books,
  .book {
    width: 100% !important;
  }
}