@import "./colors.scss";

.nav {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #e9ecef;
  position: fixed;
  top: 0;
  background: #fff;
  color: $black;
  z-index: 999;

  header {
    position: relative;

    span {
      position: absolute;
      background-position: center;
      background-repeat: no-repeat;

      &.action {
        top: 0;
        right: 20px;
        font-size: 1.6rem;
        color: $silver;
      }

      &.valid {
        color: $black;
        cursor: pointer;
      }
    }

    .arrow {
      left: 20px;
      top: 0;
      width: 18px;
      height: 16px;
      background-image: url("../assets/icon-arrow-back.svg");
    }

    .close {
      left: 20px;
      top: 1px;
      width: 14px;
      height: 14px;
      background-image: url('../assets/icon-window-close.svg');
    }

    h1 {
      text-align: center;
      font-size: 1.6rem;
      letter-spacing: -0.3px;
    }

    &.left {
      h1 {
        text-align: left;
        padding-left: 54px;
      }
    }
  }
}