@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";

.tSwitch {
  margin: 0 0 0 10px !important;

  > div {
    &:first-child {
      display: none;
    }
    &:nth-child(2) {
      width: 112px;
      height: 53px;
      background-color: #808080;
      > div {
        width: 37px;
        font-size: 53px;
        color: #fff !important;
        line-height: 53px;
        margin-left: 9px;
      }
    }
  }
}

.tSwitch[aria-pressed="true"] {
  &:focus {
    > div {
      &:nth-child(2) {
        .focusDropShadow();
      }
    }
  }
  &.US,
  &.GB {
    > div {
      &::before {
        content: "On";
        position: absolute;
        left: 23px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        background-color: #c70850 !important;
        > div {
          left: 62px !important;
        }
      }
    }
  }
  &.RU {
    > div {
      &::before {
        content: "Вкл";
        position: absolute;
        left: 23px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        background-color: #c70850 !important;
        > div {
          left: 62px !important;
        }
      }
    }
  }
  &.DE {
    > div {
      &::before {
        content: "An";
        position: absolute;
        left: 23px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        background-color: #c70850 !important;
        > div {
          left: 62px !important;
        }
      }
    }
  }
}

.tSwitch[aria-pressed="false"] {
  &:focus {
    > div {
      &:nth-child(2) {
        .focusDropShadow();
      }
    }
  }
  &.US,
  &.GB {
    > div {
      &::after {
        content: "Off";
        position: absolute;
        right: 18px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        > div {
          left: 0px !important;
        }
      }
    }
  }
  &.RU {
    > div {
      &::after {
        content: "Выкл";
        position: absolute;
        right: 12px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        > div {
          left: 0px !important;
        }
      }
    }
  }
  &.DE {
    > div {
      &::after {
        content: "Aus";
        position: absolute;
        right: 15px;
        top: 0;
        line-height: 52px;
      }
      &:nth-child(2) {
        > div {
          left: 0px !important;
        }
      }
    }
  }
}
