@import "../style.css";

.tooltip-container {
    cursor: help;
    position: relative;
}

.tooltip-container h2 {
    margin: auto;
    text-wrap: nowrap;
    width: min-content;
    padding: 1em;
}

.tooltip-content {
    --padding: 1em;
    --width: 20em;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    background-color: #00295E;
    padding: var(--padding);
    width: calc(var(--width) - 2*var(--padding));

    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;

    border-radius: 7px;
    box-shadow: var(--box-shadow);

    text-align: center;

    transition: opacity 0.2s ease;
}

.tooltip-container:hover .tooltip-content {
    transition-delay: 0.75s;
    opacity: 1;
    visibility: visible;
}

.tooltip-container:not(:hover) .tooltip-content {
    transition-delay: 0s;
}

.rotation-selector {
    width: 80%;
    margin: auto auto 3em;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.rotation-selector-item {
    width: 15%;
    text-align: center;

    flex-shrink: 0;
}

.rotation-selector-item:hover {
    cursor: grab;
}

.dragging {
    transform: scale(1.3);
}

.weapon-icon {
    width: 100%;
}

.output {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 2em;
    width: 100%;
}

.weapon-action {
    display: flex;
    width: 30%;
    height: min-content;
    text-wrap: nowrap;
}

.weapon-action-combination {
    display: flex inline;
    justify-content: space-between;
    align-items: center;
    width: 70%;
}

.weapon-action-icon {
    margin: 0;
    width: 40%;
}

.weapon-action-icon.hold {
    opacity: 0.3;
}

.weapon-action-icon.discard {
    width: 55%;
}

.weapon-action-icon.final {
    width: 50%;
}

.next-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
}

.next-arrow-icon {
    width: 100%;
}