/* mixin */ 
@import "../../mixin/ui-mixin";

.my-nav-wrap {
  .nav-title { font-size: 2.2rem; letter-spacing: 0; padding-bottom: 20px; border-bottom: 1px solid #333; }
  .nav-group {
    ul.nav {
      padding: 15px 0; 
      &:not(:last-child) {
        border-bottom: 1px dashed #abb1bc;
      }
      li {
        a {
          display: block; padding: 14px 15px 10px 15px; font-size: 1.4rem; font-weight: 500; background: transparent; transition: background .25s; border-radius: 5px;
          img { width: 17px; height: 17px; margin-right: 13px; position: relative; top: -1px; }
          &:hover { background:rgba(0,0,0,0.04); }
        }
      }
    }
  }
}

@media (max-width: 1060px) {
  .my-nav-wrap {
    .nav-group {
      ul.nav {
        padding:10px 0;
        li {
          a {
            font-size: 1.2rem; padding: 10px 13px;
            img { margin-right: 7px; width: 14px; height: 14px; }
          }
        }
      }
    }
  }
}

@media (max-width: 850px) {
  .mypage-container {
    .section {
      position: relative;
      .my-nav-wrap {
        padding: 12px 30px; position: absolute; top:0; left: 0; z-index: 10; width: 100%; height: 50px; border:0;border-bottom: 1px solid var(--line-color); padding-right: 60px; cursor: pointer;
        &:before {
          content: ''; position: absolute; top: 20px; right: 30px; width: 10px; height: 6px; transform: rotate(0); transition: transform .25s;
          background-image: url(../../../img/common/select_arrow.png);
          background-repeat: no-repeat;
          background-size: 100%;
        }
        .nav-title { @include ellipsis; position: relative; top:5px; font-size: 1.6rem; padding-bottom: 0; border-bottom: 0; }
        .nav-group { 
          display: none; background: #fff; position: absolute; top:100%; left:0; width: 100%; border-top: 1px solid var(--line-color); padding: 10px 30px 20px; border-bottom: 1px solid var(--line-color); box-shadow: 0 3px 4px rgba(0,0,0,0.08);
          ul.nav {
            li {
              a { 
                padding:13px; font-size: 1.3rem; font-weight: 600; 
                img { width: 17px; height: 17px; }
              }
            }
            &:last-child { border-bottom: 0; padding-bottom: 0; }
          }
        }
        &.mo-nav-open {
          &:before { transform: rotate(180deg); }
          .nav-group { display: block; }
        }
      }
    }
  }
}