// color
$dark-theme-bg: #444444;
$dark-theme-fg: #cccccc;
$dark-theme-fg-bright: #ffffff;
$dark-theme-menu-button-bg: #f0f0f0;

$light-theme-bg: #fcfcfc;
$light-theme-fg: #565656;
$light-theme-fg-bright: #333333;
$light-theme-menu-button-bg: #565656;

.smart-dropdown-menu {
  display: inline-block;
  position: relative;
  top: 0;
  left: 10px;
  height: 100%;

  &.show > .sdm-list {
    width: auto;
    opacity: 1;
    height: auto;
    visibility: visible;
  }

  &.animating > .sdm-list {
    width: auto;
  }
  .sdm-list {
    box-sizing: border-box;
    list-style: none;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 50px 0 0;
    padding: 0;
    display: block;
    z-index: 10;
    color: $dark-theme-fg;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;

    // extend hover area of `.sdm-list`
    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      padding: 50px 10px 10px;
      position: absolute;
      top: -50px;
      left: -10px;
    }

    li {
      white-space: nowrap; // メニュー幅が最長テキストに応じて可変
      position: static; // 子要素の.sdm-listの配置基準を親要素にするため
      line-height: 32px;
      background-color: $dark-theme-bg;

      a {
        display: block;
        position: relative;
        color: $dark-theme-fg;
        text-decoration: none;
        padding: 5px 10px 5px 10px;
        cursor: pointer;
      }

      &:hover, &:active {
        & > a {
          color: $dark-theme-fg-bright;
        }
      }

      // triarea
      &:before, &:after {
        content: "";
        display: none;
        position: absolute;
        width: 50%;
        left: 50%;
        z-index: 10;
      }

      &:before {
        top: 0;
        transform-origin: bottom left;
      }

      &:after {
        top: auto;
        transform-origin: top left;
      }

      &.show {
        &:before, &:after {
          display: block;
        }
      }
    }
  }

  // submenu
  li > .sdm-list {
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    min-height: 100%;
    margin: 0;
    top: 0px;
    left: 100%;
    background-color: $dark-theme-bg;
    z-index: 20;

    & > li {
      position: relative;
    }
  }
  li.show > .sdm-list {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}

.smart-dropdown-menu-button {
  box-sizing: border-box;
  display: block;
  width: 35px;
  height: 100%;
  position: relative;
  cursor: pointer;
  z-index: 20;
  padding: 0 5px;

  span {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 4px;
    background-color: $dark-theme-menu-button-bg;
    border-radius: 4px;
    position: relative;
    top: 50%;
    margin-top: -2px;

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: $dark-theme-menu-button-bg;
      border-radius: 4px;
    }
    &:before {
      top: -8px;
    }
    &:after {
      top: 8px;
    }
  }
}


.smart-dropdown-menu.light-theme {
  .sdm-list {
    color: $light-theme-fg;

    li {
      background-color: $light-theme-bg;

      a {
        color: $light-theme-fg;
      }

      &:hover, &:active {
        & > a {
          color: $light-theme-fg-bright;
        }
      }
    }
  }

  // submenu
  li > .sdm-list {
    background-color: $light-theme-bg;

    & > li {
      position: relative;
    }
  }
  .smart-dropdown-menu-button {
    span, span:before, span:after {
      background-color: $light-theme-menu-button-bg;
    }
  }
}