@use "@/assets/css/mixins" as mixins;
@use '@/assets/css/constants' as constants;

[data-component=tools] {
  .root-content {
    padding: 20px;
    gap: 20px;

    .own-content {
      gap: 20px;
      flex-wrap: wrap;
      justify-content: flex-start;

      > .card-box, > div {
        width: 180px;
        height: 290px;
        flex: 0 0 auto;
      }


      & > :first-child {
        cursor: pointer;

        .info {
          padding-top: 50px;
        }
      }

      & > :not(:first-child) {
        .info {
          transform: translateY(40px);
          transition: all 0.1s ease;
        }

        .operation {
          display: flex;
          flex: 1;
          justify-content: center;
          padding-bottom: 20px;
          gap: 4px;
          width: 70%;
          flex-direction: column;
          align-items: center;
          visibility: hidden;
          opacity: 0;

          > *, .edit > * {
            width: 100%;
          }

          .edit {
            > * {
              > :first-child {
                flex: 1;
              }
            }
          }
        }
      }

      & > :not(:first-child):hover {
        .info {
          transform: translateY(-10px);
          transition: all 0.2s ease;
        }

        .operation {
          visibility: visible;
          opacity: 1;
          transition: all 0.4s ease;
        }
      }
    }

    .favorite-divider {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      margin-top: 20px;

      :first-child, :last-child {
        height: 0;
        border: {
          width: 1px;
          color: constants.$divide-color;
          style: dashed;
        };
      }

      .divider-text {
        flex: 0 0 auto;
        font-size: 1.2em;
        color: constants.$font-secondary-color;
      }
    }

    .star-content {
      gap: 20px;
      flex-wrap: wrap;
      justify-content: flex-start;

      > .card-box, > div {
        width: 180px;
        height: 290px;
        flex: 0 0 auto;
      }
    }
  }
}