@import '../../styles/core/mixins';

:host {
  display: inline-flex;
  outline: none;
}

:host(.toggle-label-left) .text {
  padding-right: 0.6875rem;
  @include el-ltr(order, -1);
  @include el-rtl(order, 1);
}

:host(.toggle-label-right) .text {
  padding-left: 0.6875rem;
  @include el-ltr(order, 1);
  @include el-rtl(order, -1);
}

:host(.toggle-label-start) .toggle-label {
  flex-direction: row-reverse;

  .text {
    @include el-ltr(padding-right, 0.6875rem);
    @include el-rtl(padding-left, 0.6875rem);
  }
}

:host(.toggle-label-end) .text {
  @include el-ltr(padding-left, 0.6875rem);
  @include el-rtl(padding-right, 0.6875rem);
}

.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle {
  position: relative;
  display: inline-flex;
  box-sizing: content-box;
  @include el-component-animation(background-color, border, box-shadow);
}

.toggle-switcher {
  position: absolute;
  border-radius: 50%;
  margin: 1px;

  el-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
  }
}