@import "../../../themes/default";

:global {
  .app-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }

  .icon-logo {
    background-image: url("@{cdnUrl}/public/img/logo.png");
    width: 44px;
    height: 44px;
  }

  .icon-tk {
    background-image: url("@{cdnUrl}/public/img/icon/svg/account-circle.svg");
    width: 32px;
    height: 32px;
  }

  .icon-rank {
    background-image: url("@{cdnUrl}/public/img/icon/icon_rank.png");
    width: 24px;
    height: 24px;
  }

  .icon-play {
    background-image: url("@{cdnUrl}/public/img/icon/play01.png");
    width: 24px;
    height: 24px;
  }

  .icon-play-2 {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/play.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/play.svg");
    background-color: #ffffff;
    width: 24px;
    height: 24px;
  }

  .icon-play-co {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/play-circle-outline.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/play-circle-outline.svg");
    background-color: #ffffff;
    width: 24px;
    height: 24px;
  }

  .icon-dots {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/dots-horizontal.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/dots-horizontal.svg");
    background-color: @menu-color;
    width: 24px;
    height: 24px;
  }

  .icon-menu {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/menu.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/menu.svg");
    background-color: @menu-color;
    width: 24px;
    height: 24px;
  }

  .icon-close {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/close.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/close.svg");
    background-color: #666666;
    width: 24px;
    height: 24px;
  }

  .icon-close-circle {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/close-circle.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/close-circle.svg");
    background-color: @color-white;
    width: 24px;
    height: 24px;
  }

  .icon-back {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/arrow-left.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/arrow-left.svg");
    background-color: #666666;
    width: 24px;
    height: 24px;
  }

  .icon-catchUp {
    background-image: url("@{cdnUrl}/public/img/icon/icon_time.png");
    width: 24px;
    height: 24px;
  }

  .icon-arrow {
    background-image: url("@{cdnUrl}/public/img/icon/svg/chevron-right.svg");
    width: 32px;
    height: 32px;
  }

  .icon-check {
    background-image: url("@{cdnUrl}/public/img/icon/svg/check-circle.svg");
    width: 32px;
    height: 32px;
  }

  .icon-right {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/chevron-right.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/chevron-right.svg");
    background-color: #7c7c7c;
    width: 24px;
    height: 24px;
  }

  .icon-episode {
    background-image: url("@{cdnUrl}/public/img/icon/chontap02.png");
    width: 24px;
    height: 24px;
  }

  .icon-search {
    -webkit-mask-image: url("@{cdnUrl}/public/img/icon/svg/search.svg");
    mask-image: url("@{cdnUrl}/public/img/icon/svg/search.svg");
    background-color: #ffffff;
    width: 24px;
    height: 24px;
  }

  .icon-fb {
    background-image: url("@{cdnUrl}/public/img/icon/svg/facebook-box.svg");
    width: 24px;
    height: 24px;
  }

  .icon-apple {
    background-image: url("@{cdnUrl}/public/img/icon/svg/apple.svg");
    width: 24px;
    height: 24px;
  }

  .icon-android {
    background-image: url("@{cdnUrl}/public/img/icon/svg/android.svg");
    width: 24px;
    height: 24px;
  }

  .icon-tv {
    background-image: url("@{cdnUrl}/public/img/icon/svg/television.svg");
    width: 24px;
    height: 24px;
  }

  .icon-kara-mic {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_chonbai.png");
    width: 36px;
    height: 36px;
  }

  .icon-kara-search {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_timkiem.png");
    width: 36px;
    height: 36px;
  }

  .icon-kara-playlist {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_dachon.png");
    width: 36px;
    height: 36px;
  }

  .icon-kara-heart {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_yeuthich.png");
    width: 40px;
    height: 36px;
  }

  .icon-kara-lyric {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_casy.png");
    width: 40px;
    height: 36px;
  }

  .icon-kara-next {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_quabai.png");
    width: 40px;
    height: 36px;
  }

  .icon-kara-replay {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/icon_hatlai.png");
    width: 40px;
    height: 38px;
  }

  .icon-kara-tick {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_ok.png");
    width: 16px;
    height: 20px;
  }

  .icon-kara-minus {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_minus.png");
    width: 20px;
    height: 20px;
  }

  .icon-kara-add {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_thembai.png");
    width: 32px;
    height: 32px;
  }

  .icon-kara-remove {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_bobai.png");
    width: 32px;
    height: 32px;
  }

  .icon-kara-prioritize {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_uutien.png");
    width: 32px;
    height: 32px;
  }

  .icon-kara-favorite {
    background-image: url("@{cdnUrl}/public/img/icon/karaoke/kara_icon_yeuthich.png");
    width: 32px;
    height: 32px;
  }

  .icon-media {
    width: 95px;
    height: 50px;
  }

  .icon-banner {
    width: 100%;
    position: relative;
    padding-bottom: 101px;
    height: 0;
    background-size: cover;
    background-position: center;
  }

  .app-btn {
    &:hover {
      .icon-play {
        background-image: url("@{cdnUrl}/public/img/icon/play02.png");
      }
    }
  }
}