@use 'global/common' as global;

/* ------------------------------
 ボタングループ
------------------------------- */
.acms-btn-group {
  position: relative;
  display: table;
  padding-left: 0;
  vertical-align: middle;

  > .js-acms-btn-admin:first-child:not(:last-child, .js-acms-dropdown-toggle) {
    @include global.round-right(0);
  }

  > .js-acms-btn-admin:first-child:not(:last-child, .js-acms-dropdown-toggle) {
    @include global.round-right(0);
  }

  > .js-acms-btn-admin:first-child:not(:last-child, .js-acms-dropdown-toggle) {
    @include global.round-right(0);
  }

  > .js-acms-dropdown-toggle:not(:first-child) {
    border-left: 0;

    @include global.round-left(0);
  }

  > .acms-btn {
    display: table-cell;
    height: global.$acms-form-height-sp;
    margin-right: 0;
    border-radius: 0;

    &:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    &:last-child {
      margin-right: 0;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }

  > .acms-btn + .acms-btn {
    border-left: 0;
  }
}

@media screen and (min-width: global.$breakpoint-md-min) {
  .acms-btn-group {
    > .acms-btn {
      height: global.$acms-form-height;
    }
  }
}

/* ------------------------------
 ドロップダウンメニュー
------------------------------- */
// トグル
.js-acms-dropdown-toggle {
  position: relative;
  margin: 0;
  outline: 0;
}

.acms-btn-group .js-acms-dropdown-btn {
  position: absolute;
  top: 0;
}

.js-acms-dropdown-toggle .acms-btn-admin:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.js-acms-dropdown-toggle .acms-btn-admin:nth-child(2) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

// 開閉メニュー
.js-acms-dropdown-menu,
.acms-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: global.zIndex(js-acms-drop-down-menu);
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background: global.$acms-color-white;
  background-clip: padding-box;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 3px;
  box-shadow: 0 6px 12px rgb(0 0 0 / 17.5%);

  // リンク
  > li > a,
  > li > button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 3px 20px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }

  a:link,
  a:visited,
  button {
    color: global.$acms-color-black;
  }

  li {
    position: relative;
  }

  li:hover {
    background: global.$acms-color-gray20;
  }

  > li.acms-divider {
    height: 1px;
    margin: 4px 0;
    background-color: global.$acms-color-gray40;
  }

  // 右基点
  .acms-dropdown-right & {
    top: 5px;
    left: calc(100% + 5px);
  }

  .acms-nav .acms-dropdown-right & {
    left: 0;

    @media screen and (min-width: global.$breakpoint-md-min) {
      left: calc(100% - 5px);
    }
  }

  // 下基点
  .acms-dropdown-bottom & {
    top: calc(100% + 10px);
    left: 0;
  }

  .acms-dropdown-current {
    background-color: global.$acms-color-info10;
  }

  .acms-dropdown-current-icon {
    position: absolute;
    top: 7px;
    right: 10px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: global.$acms-color-info70;
    border-radius: 5px;
  }
}

.acms-navbar-system .js-acms-dropdown-menu {
  width: 210px;
  padding: 0;
  margin: 0;
  overflow: hidden;

  > li > a,
  > li > button {
    padding: 10px 20px;
  }
}

.acms-navbar-admin-nav-header {
  display: flex;
  padding: 10px 15px;
  background-color: global.$acms-color-gray20;
  border-bottom: 1px solid global.$acms-color-gray60;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.acms-navbar-admin-nav-status {
  flex: 1;
  padding-left: 10px;
}

.acms-navbar-admin-nav-username {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: bold;
  word-break: break-word;
}

.acms-navbar-admin-nav-usercode {
  margin: 0 0 2px;
  font-size: 10px;
}

.acms-navbar-admin-nav-dropdown-menu {
  padding: 0;
  margin: 0;
  color: global.$acms-color-black;
  list-style: none;
}

.acms-navbar-admin-nav-dropdown-menu li {
  position: relative;

  * {
    width: 100%;
  }

  &:hover {
    background: global.$acms-color-gray20;
  }

  &.acms-divider {
    height: 1px;
    margin: 4px 0;
    background-color: global.$acms-color-gray40;
  }

  a,
  button {
    box-sizing: border-box;
    display: inline-block;
    padding: 5px 20px;
    color: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }

  a:link,
  a:visited {
    color: global.$acms-color-black;
  }
}

@media screen and (max-width: global.$breakpoint-md-max) {
  .acms-dropdown-toggle-sp .js-acms-dropdown-menu {
    position: static !important;
    top: 0;
    left: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;

    & > li > a,
    & > li > button {
      padding: 10px 20px;
    }
  }
}

// タイトル
.acms-dropdown-title {
  padding: 3px 20px;
  color: global.$acms-color-gray80;
}

// 下矢印
.acms-arrow-bottom {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border: 4px solid transparent;
  border-top-color: global.$acms-color-gray80;
}

.acms-arrow-right {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border: 4px solid transparent;
  border-left-color: global.$acms-color-gray80;
}

.acms-btn-group .acms-arrow-bottom {
  margin-left: 0;
}
