:host {
  ion-card-content {
    --ion-background-color: var(--ion-color-light);
  }
  .full-sized-icon {
    width: 100%;
    height: 100%;
    max-height: 60px !important;
  }
  ion-card.brew-layout {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    ion-card-content {
      padding: 8px;
      padding-bottom: 0px;
      padding-top: var(--padding-top);
    }
    .brew-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    ion-label {
      line-height: 14px !important;
      display: inline-block;
    }
    // Overwrite
    .button-top-absolute {
      position: absolute;
      top: -15px;
      right: -20px;
      min-height: 20px;
      ion-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
      }
    }

    .no-ion-col-vertical-padding {
      ion-col {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }
    }
    ion-text {
      position: relative;
      top: -5px;
    }
  }

  ion-card.dashboard-layout {
    .vr {
      border-right: 2px solid var(--ion-color-accent);
      height: 60%;
      position: absolute;
      top: 20%;
      bottom: 20%;
      right: 0px;
    }

    // Overwrite
    .button-top-absolute {
      position: absolute;
      top: -10px;
      right: -20px;
      min-height: 20px;
      ion-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
      }
    }

    .dashboard-time-center {
      display: grid;
      height: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    ion-col.center-col {
      display: flex;
      align-items: center;
    }

    ion-list {
      background: none;
      margin: 0px;
      padding: 0px;

      ion-col {
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      ion-item {
        --background: none;
        --padding-start: 0px;
        --padding-end: 0px;
        --inner-padding-end: 0px;
        font-size: 14px;
        --min-height: 0px;

        ion-icon {
          top: 4px;
          position: relative;
          font-size: 17px;
          margin-right: 0px;
          margin-top: 0px;
          margin-bottom: 0px;
        }
      }
    }
  }

  .limit-grid-overflow {
    padding-top: 0px;
    padding-bottom: 0px;
    ion-text {
      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  async-image {
    margin: 0 auto;
  }

  ::ng-deep img {
    max-height: 60px;
    object-fit: cover;
  }

  swiper-slide {
    display: flex;
    position: relative;

    width: 100%;

    height: auto;
  }

  .add-bottom-spacing {
    margin-bottom: 20px;
  }

  .favourite-brew {
    border: 2px solid #05c793;
  }
  .best-brew {
    border: 2px solid #ae9f87;
  }
}
