@import "../../node_modules/emojione/lib/emojione-awesome/emojione-awesome.map";

$size-map: (
  "sm": 1,
  "med": 2,
  "lg": 4
);

@each $name, $size in $size-map {
  .jsxc-emoticon--#{$name} {
    background-size: 1em * $size 1em * $size;
    height: 32px * $size;
    margin: -0.2ex * $size 0.05em * $size 0 0.1em * $size;
    width: 32px * $size;
  }
}

@each $code, $name in $emoji-map {
  .jsxc-emoticon--#{$code} {
    background-image: url("../images/emojione/#{$code}.svg");
  }
}

// BEGIN: bootstrap
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";

$input-bg: var(--jsxc-color-background-main);
$input-bg-disabled: var(--jsxc-color-background-darker);
$input-color: var(--jsxc-color-main-text);
$input-border: var(--jsxc-color-border);

// Spec and IE10+
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }

  to {
    background-position: 0 0;
  }
}

.jsxc-dialog {
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
}

.jsxc-dialog,
#jsxc-video-dialog {
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
  // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
  // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms";

  .progress {
    margin-bottom: 0;

    .progress-bar {
      width: 100%;
    }
  }

  .mfp-close {
    font-size: 23px;
  }
}

.mfp-bg {
  background-color: #fff;
  opacity: 1;
  z-index: 9000;
}

.mfp-wrap {
  z-index: 9010;
}

.mfp-content {
  text-align: center;
}

//  END: bootstrap

#cboxWrapper {
  outline: none;
}
