.abc-checkbox, .abc-radio {
  margin-bottom: 20px;

  label {
    .abc-label-text {
      display: inline-block;
      position: relative;
      top: 2px;
      padding-left: 13px;
    }

    &::before{
      width: 22px;
      height: 22px;
      border: 2px solid $input-border-color;
      @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out);
    }

  }
}

.abc-checkbox {
  padding-left: 20px;

  label{
    padding-left: 0;

    &::before{
      border-radius: 0;
      @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out);
    }

    &::after {
      width: 20px;
      height: 20px;
      top: 2px;
      left: 2px;
    }
  }

  input[type="checkbox"],
  input[type="radio"] {

    &:focus + label::before{
      outline: none;
    }


    &:checked + label::after{
      font-family: "Ionicons";
      content: "\F2BC";
      font-size: 15px;
    }

    &:disabled + label{
      opacity: 0.5;
    }
  }
}

.abc-radio {

  label {
    padding-left: 0;

    &::after {
      width: 10px;
      height: 10px;
      top: 7.8px;
      left: 6px;
    }
  }

  input[type="radio"] {

    &:focus + label::before {
      outline: none;
    }
  }
}

//Medium Editor
.medium-editor-toolbar,
.medium-editor-toolbar-form,
.medium-editor-toolbar-actions,
.medium-editor-toolbar-anchor-preview {
  background-color: $brand-primary;
  border-radius: $btn-border-radius;
  box-shadow: $btn-box-shadow;
}

.medium-editor-toolbar {
  max-width: 80%;
  box-shadow: none;
  .medium-editor-toolbar-actions {
    overflow: hidden;
  }

  .medium-editor-action {
    @extend .btn.btn-primary;
    height: $medium-editor-button-size;
    padding: $btn-padding-y $btn-group-button-padding-x;
    box-shadow: none;
    border-radius: 0;

    &.medium-editor-button-active {
      background-color: darken($brand-primary, 15%);
    }
  }
}

.medium-editor-toolbar-form {
  color: $white;
  overflow: hidden;

  .medium-editor-toolbar-input {
    height: $medium-editor-button-size;
    background: $brand-primary;
    box-sizing: border-box;
    color: $white;
    padding-left: 16px;
    width: 220px;

    &::-webkit-input-placeholder {
      color: rgba($white, .8);
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: rgba($white, .8);
    }
    &::-moz-placeholder {  /* Firefox 19+ */
      color: rgba($white, .8);
    }
    &:-ms-input-placeholder {
      color: rgba($white, .8);
    }
  }

  a {
    color: $white;
    transform: translateY(2px);
  }

  .medium-editor-toolbar-close {
    margin-right: 16px;
  }
}

.medium-toolbar-arrow-under:after {
  border-color: $brand-primary transparent transparent transparent;
  top: $medium-editor-button-size;
}

.medium-toolbar-arrow-over:before {
  border-color: transparent transparent $brand-primary transparent;
}

.medium-editor-toolbar-anchor-preview {
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
  .medium-editor-toolbar-anchor-preview {
    margin: 0;
  }
}

.medium-editor-anchor-preview {
  max-width: 50%;
  a {
    color: $white;
    text-decoration: none;
  }
}

//v-tooltip

.tooltip.vuestic-tooltip {
  @extend .tooltip.show;

  .tooltip-inner {
    box-shadow: $tooltip-box-shadow;
    line-height: $tooltip-line-height;
    font-weight: $tooltip-font-weight;
    border-radius: 0;
  }

  .tooltip-arrow {
    @extend .arrow;
  }

  &[x-placement^="top"] {
    @extend .bs-tooltip-top;
  }

  &[x-placement^="bottom"] {
    @extend .bs-tooltip-bottom;
  }

  &[x-placement^="right"] {
    @extend .bs-tooltip-right;
    margin-left: .15rem;
  }

  &[x-placement^="left"] {
    @extend .bs-tooltip-left;
    margin-right: .15rem;
  }

  &.popover {
    line-height: $popover-line-height;
    box-shadow: $popover-box-shadow;

    .popover-header, .popover-body {
      text-align: left;
      padding-right: 0;
    }

    .popover-inner {
      max-width: 100%;
      box-shadow: none;

      > * {
        display: flex;
        flex-direction: row;
      }
    }

    .popover-header {
      font-weight: $popover-header-font-weight;
    }

    .popover-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      color: $popover-icon-color;
      font-size: $popover-icon-size;
    }

    .popover-content:first-child {
      .popover-header, .popover-body {
        padding:  $popover-body-padding-y $popover-header-no-icon-padding-x;
        padding-right: 0;
      }
    }

    &[x-placement^="top"] {
      @extend .bs-popover-top;
    }

    &[x-placement^="bottom"] {
      @extend .bs-popover-bottom;
    }

    &[x-placement^="right"] {
      @extend .bs-popover-right;
    }

    &[x-placement^="left"] {
      @extend .bs-popover-left;
    }
  }
}

//vue-toasted

.toasted-container {
  &.full-width {
    max-width: 100%;
    width: calc(100% - #{$layout-padding} - #{$layout-padding-right});
    transform: translateX(0);
    left: 0;

    .toasted.vuestic-toast {
      max-width: 100%;
      width: 100%;
      left: $layout-padding;
      justify-content: normal;
    }

    @include media-breakpoint-down(md) {
      width: calc(100% - #{$content-mobile-wrap-pl} - #{$content-mobile-wrap-pr});
      left: 0;

      .toasted.vuestic-toast {
        left: $content-mobile-wrap-pl;
      }
    }
  }
}

.toasted.vuestic-toast {
  min-height: $toast-min-height;
  padding: $toast-padding-y $toast-padding-x;
  font-size: $toast-font-size;
  font-weight: $toast-font-weight;
  line-height: $toast-line-height;
  background: rgba($toast-bg, 0.9);
  box-shadow: $toast-box-shadow;
  color: $toast-color;
  border-radius: $toast-border-radius;

  i, i.fa {
    font-size: $toast-icon-size;
    color: $toast-icon-color;
    margin-left: $toast-icon-ml;
    margin-right: $toast-icon-mr;
  }

  a.action:hover {
    text-decoration: none;
  }
}