@import ../../theme/ui-rules.sass

ion-card
  border-radius: 24px
ion-item
  ion-card-header 
    padding-left: 0
.card-image-container.disabled
  filter: grayscale(100%)

  x-image
    .card-image   
      margin: 12px

    // padding: 10px

ion-button::part(native) 
  padding: 10px


.tool-item 
  margin: 15px 10px 
  font-size: 12px
  background: #FFFFFF
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08)
  padding: 16px
  border-radius: 24px

  .titles 
    display: flex
    align-items: center
    justify-content: space-between
    margin-top: 1em
    ion-img 
      border-radius: 24px
      height: 48px !important
      width: 48px !important
  .legend 
    /* Semi/L11 */
    padding-left: 0px
    text-align: left
    font-family: Open Sans
    font-style: normal
    font-weight: 600
    font-size: 14px
    line-height: 14px
    /* or 100% */

    letter-spacing: -0.05em

    /* Black/60% */

    color: rgba(0, 0, 0, 0.6)
    margin-bottom: 8px
  
  .tool-name 
    /* Bold/L9 */
    padding-left: 0px
    text-align: left
    font-family: Open Sans
    font-style: normal
    font-weight: bold
    font-size: 20px
    line-height: 20px
    /* identical to box height, or 100% */

    letter-spacing: -0.05em

    /* Black/80% */

    color: rgba(0, 0, 0, 0.8)
    margin-bottom: 4px