.tap-app-card {
  width: 110px;
  min-height: 106px;
  padding: 20px 16px 5px;
  border-radius: 5px;
  border: 1px solid #ededed;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  justify-content: flex-start !important;

  &.tap-locked {
    &:before {
      background: rgba(255, 255, 255, .5);
      background-size: contain;
      content: '';
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 3;
    }
  }

  &:hover {
    box-shadow: 0 4px 9px 0 rgba(23, 28, 33, 0.1);

    .tap-app-logo {
      opacity: 0.8;
    }

    .tap-button {
      opacity: 1;
    }

    .tap-app-name {
      color: #4f565d;
    }

    .tap-app-lock {
      .tap-app-lock-text {
        display: inline-block;
      }
    }
  }

  .tap-app-lock {
    position: absolute;
    top: 5px;
    left: 5px;
    color: #a0a0a0;
    gap: 5px;

    .tap-icon-wrapper {
      --tap-icon-size: 12px;
    }

    .tap-app-lock-text {
      display: none;
      text-transform: uppercase;
      font-size: 10px;
    }
  }

  .tap-button {
    opacity: 0;
    z-index: 5;
    padding: 2px 5px;
    border-radius: 10px;

    &:hover {
      .tap-button-text {
        color: #fff;
      }
    }

    .tap-button-text {
      text-transform: capitalize;
      font-size: 10px;
      color: #4f9542;
    }
  }

  .tap-app-name {
    text-align: center;
    font-size: 12px;
    color: #737d87;
  }

  &.tap-app-delay {
    &:hover {
      background: rgba(255, 166, 121, 0.1);
    }

    .tap-app-logo {
      color: var(--tap-delay-color);
    }
  }

  &.tap-app-filters {
    &:hover {
      background: rgba(253, 135, 157, 0.1);
    }

    .tap-app-logo {
      color: var(--tap-filter-color);
    }
  }

  .tap-data-logo {
    .tap-icon-wrapper {
      --tap-icon-size: 29px;
    }

    img {
      width: 29px;
    }
  }
}