/* ドロップダウン
----------------------------------------------- */
.com-dropdown {
  position: relative;
}

.com-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s;
  }

  .com-dropdown.is-open > &::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

.com-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 200px;
  padding-top: 8px;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.2s,
    opacity 0.2s;

  .com-dropdown.is-open > & {
    visibility: visible;
    opacity: 1;
  }
}

.com-dropdown-nav {
  background: map-get($colors, white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0;

  a {
    display: block;
    padding: 8px 20px;
    white-space: nowrap;
    transition: background-color 0.2s;

    &:hover {
      background-color: map-get($colors, gray);
    }
  }
}