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

[data-component=component-store-card] {
  height: 100%;
  cursor: pointer;

  .store-card {
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;

    > * {
      display: block;
      flex: 0 0 auto;
    }

    .header {
      display: flex;
      width: 100%;
      padding: 10px;
      justify-content: space-between;

      .version {
        width: 0;
        transition: all 0.2s;
      }

      .operation {
        display: flex;
        font-size: 1.6em;
        gap: 4px;
        opacity: 0;
        transition: all 0.2s;
        z-index: 100;

        > *:hover {
          color: constants.$font-secondary-color;
        }
      }
    }

    .icon {
      display: flex;
      padding-top: 10px;
      padding-bottom: 20px;
      color: constants.$production-color;
      font-size: constants.$SIZE_ICON_XL;
      justify-content: center;

      img {
        width: constants.$SIZE_ICON_XL;
      }
    }

    .info {
      padding-top: 20px;

      .tool-name {
        font-weight: bolder;
        font-size: 1.6em;
      }

      .tool-desc {
        margin: {
          top: 10px;
          left: auto;
          right: auto;
        };
        color: constants.$font-secondary-color;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 40px;
        width: 80%;
      }
    }

    .author {
      display: flex;
      margin-top: auto;
      flex-direction: row;
      justify-content: end;
      padding-bottom: 10px;
      gap: 10px;

      .avatar {
        > * {
          width: 24px;
          height: 24px;
        }
      }

      .author-name {
        display: flex;
        align-items: center;
      }
    }
  }

  :hover {
    .header {
      .version {
        opacity: 0;
      }

      .operation {
        opacity: 1;
      }
    }
  }
}