ion-toolbar {
  --min-height: 44pt;
  --color: var(--ion-color-light);
  --border-width: 0;
  --background: linear-gradient(to left, transparent, #0155fe), #389cfe;

  ion-back-button {
    --color: var(--ion-color-light) !important;
    // --icon-padding-start: 16pt !important;
    --icon-font-size: 24pt !important;
  }
  ion-title{
    text-align: center;
    color: #ffffff;
    position: absolute;
    font-size: 20pt;
    width: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    top: 0;
    line-height: 44pt;
  }
  ion-back-button{
    border: none;
  }
  .back-btn{
    margin: 5pt;
    font-size: 20pt;
    z-index: 99;
  }

  .detail-operation{
    z-index: 99;
    margin-right: 5pt;
    ion-icon{
      margin: 5pt;
      font-size: 18pt;
    }
  }
}
.custom-toast {
  --background: rgba(0, 0, 0, 0.6);
  --border-radius: 8pt;
  --color: var(--ion-color-light);
  text-align: center;
  --max-width: max-content;

  --border-color: rgba(0, 0, 0, 0);
  --border-style: solid;
  --border-width: 0 1pt;

  font-size: 12pt;

  --height: 44pt;
}
.disabled {
  transition: 0.3s;
  opacity: 0.5;
}
.clear{
  clear: both;
}
.empty-container{
  font-size: 15pt;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.ion-tab-base {
}
$tabImageName: 'home' 'collect' 'message' 'mine';
@for $i from 1 to 5 {
  // for all platform
  .tab-button .icon-#{nth($tabImageName, $i)} {
    @extend .ion-tab-base;
    background-image: url("../assets/tab/#{nth($tabImageName, $i)}_default.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21pt 19pt;
  }
  .tab-button.tab-selected .icon-#{nth($tabImageName, $i)} {
    @extend .ion-tab-base;
    background-image: url("../assets/tab/#{nth($tabImageName, $i)}_selected.png");

    animation: animation_1 0.16s cubic-bezier(0.5, 0, 0.5, 1) both, animation_2 0.24s cubic-bezier(0.5, 1, 0.5, 0) 0.16s both, animation_3 0.28s cubic-bezier(0.43, 0, 0.64, 1) 0.4s both, animation_4 0.32s cubic-bezier(0.3125, 1, 0.375, 0) 0.68s both;

    @keyframes animation_1 {
      from {
        transform: scale(1, 1);
      }
      to {
        transform: scale(1.1, 1.1);
      }
    }

    @keyframes animation_2 {
      from {
        transform: scale(1.1, 1.1);
      }
      to {
        transform: scale(0.96, 0.96);
      }
    }

    @keyframes animation_3 {
      from {
        transform: scale(0.96, 0.96);
      }
      to {
        transform: scale(1.02, 1.02);
      }
    }

    @keyframes animation_4 {
      from {
        transform: scale(1.02, 1.02);
      }
      to {
        transform: scale(1, 1);
      }
    }
  }
}