@import './../../styles/variables';

.header-wrapper {
  height: 35px;
  background-color: $gray-800;
  text-align: center;
  padding: 7px;
  width: 100%;
  display: flex;
  align-self: stretch;
  position: fixed;
  z-index: 7;
  .device-section {
    .paypay-select {
      width: 90%;
    }
  }
  .ratio-section {
    margin-left: -10px;
    max-width: 80px;
    .paypay-select {
      width: 100%;
    }
  }
  .paypay-select-input {
    outline: none;
    box-shadow: none;
    border: none;
  }
  .paypay-select .paypay-input-wrapper {
    input {
      padding: 1px 5px;
      outline: none;
    }
    &:hover {
      input {
        border-color: $gray-400 !important;
      }
    }
  }
  .paypay-input-inner {
    outline: none;
    box-shadow: none;
    &:focus {
      border-color: $gray-400 !important;
      outline: 0;
      box-shadow: none;
    }
  }
  .header-icon-wrapper {
    height: 100%;
    width: 25px;
    margin: 0px 5px;
    justify-content: center;
    color: $gray-600;
    outline: none;
    &:hover {
      outline: 1px solid $gray-400;
    }
  }
  .location,
  .compass-info {
    display: flex;
    input {
      margin: 0 2px;
      width: 84px;
    }
  }
  .right-align {
    margin-left: auto;
    display: inline-flex;
    margin-right: 5px;
  }
}