@import "../../style/variable";
//controls
$controlHeight: 48px;

.xgplayer {
  &.not-allow-autoplay,
  &.xgplayer-nostart {
    // .xgplayer-controls, .flex-controls {
    .xgplayer-controls {
      pointer-events: none;
      visibility: hidden;
      cursor: default;
      opacity: 0;
    }
  }

  &.xgplayer-inactive {
    .controls-autohide {
      // display: none;
      pointer-events: none;
      visibility: hidden;
      cursor: default;
      opacity: 0;
    }
    // .controls-permanent {
    //   pointer-events: auto;
    //   visibility: visible;
    //   opacity: 1;
    // }
  }

  &.not-allow-autoplay,
  &.xgplayer-nostart {
    .xgplayer-controls-initshow {
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
    }
  }

  .xgplayer-controls {
    display: block;
    position: absolute;
    visibility: visible;
    height: $controlHeight;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: 10;
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.37),rgba(0,0,0,.75),rgba(0,0,0,.75));
    transition: opacity .5s ease,visibility .5s ease;
    &.show {
      display: block;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  .xg-inner-controls {
    position: absolute;
    height: 40px;
    bottom: 0;
    justify-content: space-between;
    display: flex;
  }

  .xg-left-grid,  .xg-right-grid {
    position: relative;
    // float: left;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    height: 100%;
    z-index: 1;
  }

  .xg-right-grid {
    // float: right;
    flex-direction: row-reverse;
    > :first-child {
      margin-right: 0;
    }
    xg-icon {
      margin-left: 0;
    }
  }

  .xg-left-grid {
    > :first-child {
      margin-left: 0;
    }
    xg-icon {
      margin-right: 0;
    }
  }

  .xg-center-grid {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    outline: none;
    // top: -5px;
    top: -20px;
    padding: 5px 0;
    text-align: center;
  }

  .flex-controls {
    .xg-inner-controls {
      justify-content: space-around;
      display: flex;
      bottom: 8px;
    }
    .xg-center-grid {
      display: flex;
      flex: 1;
      position: relative;
      top: 0;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      left: 0;
      right: 0;
      padding: 0 16px;
    }
  }
  &.xgplayer-mobile {
    .xg-center-grid {
      z-index: 2;
    }
    .flex-controls {
      .xg-center-grid {
        padding: 0 8px;
      }
    }
  }

  .bottom-controls {
    .xg-center-grid {
      top: 20px;
      padding:0;
    }
    .xg-left-grid, .xg-right-grid {
      bottom: 10px;
    }
  }

  .mini-controls {
    background-image: none;
    .xg-inner-controls {
      bottom: 0;
      left: 0;
      right: 0;
    }
    .xg-center-grid {
      bottom: -28px;
      top: auto;
      padding: 0;
    }
    .xg-left-grid,  .xg-right-grid {
      display: none;
    }
  }

  // class witch position follow controls start
  .controls-follow {
    bottom: 70px;
    transition: bottom .3s ease;
  }

  &.flex-controls {
    .controls-follow {
      bottom: 45px;
    }
  }

  &.xgplayer-inactive, &.no-controls, &.mini-controls {
    .controls-follow {
      bottom: 10px;
    }
  }
  // class witch position follow controls end
}

// @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
//   .xgplayer-mobile {
//     &.xgplayer-is-fullscreen, &.xgplayer-is-cssfullscreen{
//       .flex-controls {
//         /* bottom: 34px; */
//         /* iOS 11.0 */
//         bottom: constant(safe-area-inset-bottom);
//         /* 11.2+ */
//         bottom: env(Safe-area-inset-bottom, 20px);
//       }
//     }
//   }
// }