@use 'sass:list';
@use '../abstract/_all';
@use '../abstract/breakpoints';
@use '../abstract/setup';
@use '../elements/tooltip';

.is-rtl {
  .fl-left {
    float: right;
  }
  .fl-right {
    float: left;
  }
  .text-left {
    text-align: right;
  }
  .text-right {
    text-align: left;
  }
  .xs\:text-right {
    @media (max-width: #{breakpoints.$break-sm - 1}) {
      text-align: left;
    }
  }
  .sm\:text-right {
    @media (max-width: #{breakpoints.$break-sm - 1}) {
      text-align: left;
    }
  }
  .md\:text-right {
    @media (max-width: #{breakpoints.$break-md - 1}) {
      text-align: left;
    }
  }

  .xs\:text-left {
    @media (max-width: #{breakpoints.$break-sm - 1}) {
      text-align: right;
    }
  }
  .sm\:text-left {
    @media (max-width: #{breakpoints.$break-sm - 1}) {
      text-align: right;
    }
  }
  .md\:text-left {
    @media (max-width: #{breakpoints.$break-md - 1}) {
      text-align: right;
    }
  }

  .select select:not([multiple]) {
    padding-right: 16px;
    padding-left: 45px;
  }
  .select-size select:not([multiple]) {
    padding-right: 16px;
    padding-left: 16px;
  }
  .select:not(.is-multiple, .is-loading)::after {
    right: inherit;
    left: 20px;
  }
  .select.select-label select {
    padding-right: 100px;
  }
  .select.select-label label {
    left: inherit;
    right: 16px;
  }
  .select:not(.is-multiple, .is-loading).select-box::after {
    left: 8px;
  }
  @for $i from 1 through list.length(setup.$espaciados) {
    $espaciado: list.nth(setup.$espaciados, $i);
    .mr-#{$espaciado} {
      margin-right: 0;
      margin-left: #{$espaciado}px;
    }
    .ml-#{$espaciado} {
      margin-left: 0;
      margin-right: #{$espaciado}px;
    }
    .pr-#{$espaciado} {
      padding-right: 0;
      padding-left: #{$espaciado}px;
    }
    .pl-#{$espaciado} {
      padding-left: 0;
      padding-right: #{$espaciado}px;
    }
  }
  .check-center.check-bleed.checkbox-radio [type='radio']:checked + label::before,
  .check-center.check-bleed.checkbox-radio [type='radio']:not(:checked) + label::before {
    left: initial;
    right: 0;
  }
  .check-center.check-bleed.checkbox-radio [type='radio']:checked + label .ico-radio,
  .check-center.check-bleed.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
    left: initial;
    right: 5px;
  }
  .btn {
    &.btn-separate {
      svg-icon {
        transform: scaleX(-1);
        margin-left: 0;
        margin-right: 8px;
      }
    }
    &.btn-world {
      .btn-world-center {
        text-align: right;
      }
      .btn-world-right {
        transform: rotateY(180deg);
      }
    }
  }
  .btn-group {
    .btn {
      &:first-child() {
        border-radius: 0 setup.$btn-radius setup.$btn-radius 0;
      }
      &:last-child() {
        border-radius: setup.$btn-radius 0 0 setup.$btn-radius;
      }
    }
  }
  .btn-social-login {
    svg {
      margin-right: 0;
      margin-left: 8px;
    }
  }
  .btn-social {
    padding-right: 48px;
    padding-left: 0;
    svg-icon {
      right: 1px;
      left: auto;
      margin-right: 0;
      margin-left: 16px;
    }
    &.btn-google {
      padding-right: 60px;
      padding-left: 0;
    }
    &.btn-naver {
      padding-right: 80px;
      padding-left: 0;
    }
  }
  .checkbox-item {
    [type='checkbox']:not(:checked),
    [type='checkbox']:checked {
      left: 0;
      right: -9999px;
      position: absolute;
      width: 70px;
    }
    [type='checkbox']:not(:checked) + label::before,
    [type='checkbox']:checked + label::before {
      left: auto;
      right: 0;
      margin: 0 0 0 10px;
    }
    [type='checkbox']:not(:checked) + label,
    [type='checkbox']:checked + label {
      padding-left: 0;
      padding-right: 40px;
    }
    [type='checkbox']:not(:checked) + label span,
    [type='checkbox']:checked + label span {
      &.theta {
        padding-left: 0;
        padding-right: 40px;
      }
    }
    [type='checkbox']:not(:checked) + label .icon,
    [type='checkbox']:checked + label .icon {
      right: 5px;
      left: auto;
      top: 4px;
    }
    .ma-wrapper-terms-inner {
      span,
      span.legal-text {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
  .check-bleed {
    &.checkbox-radio [type='radio']:checked + label .ico-radio,
    &.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
      left: 0;
      right: 17px;
    }
    &.checkbox-radio [type='radio']:checked + label::before,
    &.checkbox-radio [type='radio']:not(:checked) + label::before {
      left: auto;
      right: 0;
    }
  }
  .check-center {
    &.checkbox-radio [type='radio']:checked + label::before,
    &.checkbox-radio [type='radio']:not(:checked) + label::before {
      left: auto;
      right: 16px;
      margin: 0;
    }
    &.checkbox-radio [type='radio']:checked + label .ico-radio,
    &.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {
      left: 0;
      right: 23px;
    }
    .box3-content {
      padding-left: 0;
      padding-right: calc(48px);
    }
  }
  .checkbox-radio {
    [type='radio']:not(:checked),
    [type='radio']:checked {
      left: 0;
      right: -9999px;
      position: absolute;
      width: 70px;
    }
  }
  .checkbox-item-text {
    span {
      margin-left: 0;
      margin-right: 40px;
    }
  }
  [type='radio']:not(:checked),
  [type='radio']:checked,
  .checkbox-card [type='radio'] {
    left: 9999px;
  }
  .checkbox-item-2 [type='checkbox']:not(:checked),
  .checkbox-item-2 [type='checkbox']:checked {
    left: 9999px;
  }
  .color-wrap {
    button {
      margin-right: 0;
      margin-left: 8px;
    }
  }
  .form-input-label,
  .form-input-label-2 {
    &.datalist {
      svg {
        right: auto;
        left: 16px;
      }
      .validation-error-messages {
        svg {
          left: auto;
        }
      }
    }
  }
  .select {
    &.select-box {
      select {
        padding: 0 8px 0 16px;
      }
      &::after {
        left: 6px;
        right: auto;
      }
    }
    &.select-flat {
      label {
        left: auto;
      }
      select {
        padding-right: 0;
      }
      &::after {
        left: 20px;
        right: auto;
      }
    }
  }
  .form-input-label {
    .info-text {
      left: 0;
    }
    &.icon-right {
      .form-text {
        right: auto;
        left: 0;
      }
    }
    &.has-ico-post {
      svg-icon {
        position: absolute;
        right: 0;
      }
      .validation-error-messages {
        svg-icon {
          position: relative;
        }
      }
    }
  }
  .form-input-prefix {
    .input-prefix {
      margin-right: 0;
      margin-left: 8px;
    }
  }
  .form-input-label-2 {
    &.icon-right {
      .form-text {
        right: auto;
        left: 0;
      }
    }
    &.has-ico-post {
      .ico-post {
        right: auto;
        left: 0;
      }
      .validation-error-messages {
        svg-icon {
          position: relative;
        }
      }
    }
    &.has-ico-pre {
      .ico-pre {
        position: absolute;
        right: 0;
        left: auto;
      }
      .validation-error-messages {
        svg-icon {
          position: relative;
        }
      }
    }
    .info-text {
      left: 0;
      right: initial;
    }
  }
  .has-ico-post {
    &.btn,
    & > input,
    & > label {
      padding-right: setup.$btn-padding;
      padding-left: setup.$btn-padding * 2 + setup.$svg-size;
    }
  }
  .has-ico-pre {
    &.btn,
    & > input,
    & > label {
      padding-left: setup.$btn-padding;
      padding-right: setup.$btn-padding * 2 + setup.$svg-size + 4px;
    }
  }
  .link-svg-pre,
  button.link-line.link-svg-pre {
    padding-left: 0;
    padding-right: 20px;
    &::after {
      left: 0;
    }
    svg-icon {
      left: auto;
      right: 0;
    }
  }
  .link-svg-post,
  button.link-line.link-svg-post {
    padding-left: 20px;
    padding-right: 0;
    &::after {
      right: 0;
    }
    svg-icon {
      right: auto;
      left: 0;
    }
  }
  ul.list-disc {
    li {
      &::after {
        right: 0;
      }
    }
  }
  .list-button {
    &.list-secundary,
    &.list-secondary {
      padding-left: 16px;
      padding-right: 42px;
    }
    &.list-tertiary {
      padding-left: 16px;
      padding-right: 64px;
    }
  }
  .tabs-mini {
    float: left;
    li:first-child a::after {
      left: 0;
      right: auto;
    }
  }
  .header-account-back {
    left: auto;
    right: 0;
    svg-icon {
      svg {
        transform: rotate(180deg);
      }
    }
  }
  .validation-error-messages {
    svg-icon {
      padding-right: 0;
      padding-left: 8px;
    }
  }
  .tooltip-sm {
    left: calc(50% - 16px);
    right: auto;
    padding-left: setup.$tooltip-padding + 16px;
    padding-right: setup.$tooltip-padding * 2;
    &::after {
      right: auto;
      left: tooltip.$tooltip-dist;
    }
    &.tooltip-tr,
    &.tooltip-br {
      right: calc(50% - 16px);
      left: auto;
      &::after {
        left: auto;
        right: tooltip.$tooltip-dist;
      }
    }
    .close {
      right: auto;
      left: setup.$tooltip-padding;
    }
  }
  .tooltip-sm-temp {
    left: -8px;
    right: auto;
    padding-left: setup.$tooltip-padding + 16px;
    padding-right: setup.$tooltip-padding * 2;
    &::after {
      right: auto;
      left: tooltip.$tooltip-dist;
    }
    .close-temp {
      right: auto;
      left: setup.$tooltip-padding;
    }
  }
  .tag-new {
    right: auto;
    left: -30px;
  }
  .box4 {
    ul {
      margin-left: 0;
      margin-right: 16px;
    }
    &::before {
      left: initial;
      top: 47px;
      right: 20px;
    }
  }
}