import styled from "styled-components";

export const Icon2525 = styled.button<{ $selected?: boolean }>`
    margin: 0;
    padding: 5px;
    width: 25px;
    height: 25px;
    border: none;
    border-radius: 0;

    cursor: pointer;
    background: transparent;
    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    ${(props) => props.$selected && "background: rgba(255, 255, 255, 0.25);"}
    &:hover {
        background: rgba(255, 255, 255, 0.15);
    }
`;

export const Button = styled.button<{ $active?: boolean }>`
    margin: 2px;
    padding: 2px;
    border: 1px solid white;
    border-radius: 0;

    cursor: pointer;
    background: ${({ $active }) => $active ? "white" : "var(--primary-color)"};
    color: ${({ $active }) => $active ? "var(--primary-color)" : "white"};;

    display: flex;
    flex-direction: column;
    align-items: center;

    &:hover {
        color: ${({ $active }) => $active ? "rgba(0, 0, 0, 0.25)" : "rgba(255, 255, 255, 0.50)"};
        background: ${({ $active }) => $active ? "rgba(255, 255, 255, 0.85)" : "rgba(255, 255, 255, 0.10)"};
    }

    &:disabled {
        color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.10);
        cursor: not-allowed;
    }
`;