@import 'scss/styles.scss';

.address_holder {
  width: 100%;

  .main_address_holder {
    position: relative;
    flex: 1;
    &.input_for_routing {
      .input-clear {
        display: none !important;
      }

      .input-dropdown-arrow {
        display: none !important;
      }

      input {
        height: 22px !important;
        font-size: 11px !important;
        line-height: 14px !important;
        padding-right: 64px !important;
      }

      label {
        font-size: 11px !important;
        line-height: 14px !important;
      }
    }
    &.not_expanded {
      input {
        background-color: $white-2 !important;
        cursor: pointer;
      }
      &:hover {
        input {
          background-color: $ta-gray-01 !important;
        }
      }
    }
    &.expanded_address {
      input {
        background-color: $bw6-2 !important;
        color: $white-2 !important;
      }

      .valid-focus-out-filled {
        background-color: $bw6-2 !important;
        color: $white-2 !important;
      }
    }

    .stop_hold {
      position: absolute;
      right: 2px;
      top: 2px;

      width: 62px;
      height: 18px;

      background-color: $grey-9;
      color: $white-2;
      border-radius: 1px;
      cursor: pointer;
      user-select: none;

      &:hover {
        background-color: $grey;
      }
    }
  }

  .ca-input-commands {
    .main-commands {
      margin-left: 6px;
      .ca-input-command-svg-first {
        svg {
          rect {
            fill: $grey-19;
          }

          path {
            fill: $white-2;
          }
        }

        &.allow_confirm {
          svg {
            rect {
              fill: $grey-9;
            }
          }

          &:hover {
            rect {
              fill: $grey-2;
            }
          }
        }
      }

      .ca-input-command-svg-second {
        svg {
          rect {
            fill: $grey-9;
          }

          path {
            fill: $white-2;
          }
        }

        &:hover {
          rect {
            fill: $grey-2;
          }
        }
      }

      &:hover {
        &:hover {
          svg {
            overflow: visible;
            rect {
              transform: scale(1.2);
              transform-origin: center;
              transition: transform 0.3s;
            }
          }
        }
      }
    }
  }
}