@tailwind base;
@tailwind components;
@tailwind utilities;

/* Notosans font  */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

.animate-slide {
    animation: slide 10s linear infinite;
}

.ticker-container:hover .animate-slide {
    animation-play-state: paused;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #1e40af;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e40af;
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #1e40af transparent;
}

.custom-select {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* Remove default arrow for Safari */
    -moz-appearance: none; /* Remove default arrow for Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10.5L12 15.5L17 10.5" stroke="%2340DDFF" stroke-linecap="round" stroke-linejoin="round"/></svg>'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 0.5rem center; /* Position the arrow */
    background-size: 1rem; /* Size of the arrow */
    padding-right: 2rem; /* Add space for the arrow */
}

/* Change text color of options */
.custom-select option {
    color: #000; /* Change this to your desired color */
}

/* Change text color of selected option */
.custom-select:focus {
    color: #d8d8d8; /* Change this to your desired color */
}