@import '../../assets/styles/colors';

.storybook-icon-card-container {
  background-color: $white;
  border: 1px solid $grey_6;
  box-shadow: 0px 0px 6px $shadow;
  border-radius: 10px;
  opacity: 1;
  font-size: 12px;
  &.card {
    width: 250px;
    height: 136px;
    &--x-small {
      width: 156px;
      height: 83px;
      font-size: 10px;
    }
    &--small {
      width: 196px;
      height: 104px;
      font-size: 10px;
    }
    &--medium {
      width: 250px;
      height: 136px;
    }
    &--large {
      width: 400px;
      height: 213px;
    }
  }

  .icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    position: relative;
    width: 70px;
    height: 70px;
    bottom: 37px;
    left: 92px;
    box-shadow: 0px 0px 12px $shadow;
    &--x-small {
      width: 44px;
      height: 44px;
      bottom: 24px;
      left: 56px;
    }
    &--small {
      width: 54px;
      height: 54px;
      bottom: 28px;
      left: 72px;
    }
    &--medium {
      width: 70px;
      height: 70px;
      bottom: 37px;
      left: 92px;
    }
    &--large {
      width: 88px;
      height: 88px;
      bottom: 46px;
      left: 154px;
    }
    .icon-position {
      display: flex;
    }
  }
  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: $text_color;
    height: 24px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    &--x-small {
      font-size: 11px;
      height: 14px;
      bottom: 20px;
    }
    &--small {
      font-size: 12px;
      height: 16px;
      bottom: 22px;
    }
    &--medium {
      height: 24px;
      font-size: 16px;
      bottom: 25px;
    }
    &--large {
      font-size: 17px;
      height: 28px;
      bottom: 25px;
    }
  }
  .card-content-wrapper {
    padding: 5px 20px;
    bottom: 20px;
    position: relative;
    &--x-small {
      padding: 0px 10px;
      bottom: 16px;
    }
    &--small {
      padding: 2px 10px;
      bottom: 18px;
    }
    &--medium {
      padding: 5px 20px;
      bottom: 24px;
    }
    &--large {
      padding: 10px 20px;
      bottom: 20px;
    }
    .card-content {
      max-height: 58px;
      overflow: hidden;
      position: absolute;
      left: 0;
      padding: 0px 10px;
      &--x-small {
        max-height: 32px;
      }
      &--small {
        max-height: 44px;
      }
      &--medium {
        max-height: 58px;
      }
      &--large {
        max-height: 78px;
      }
    }
  }
}