@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import "./variables.css";

body {
    font-family: 'Lexend', sans-serif;
    background: rgb(29, 30, 34); /* Light background color */
    color: var(--secondary); /* Main text color */
    margin: 0;
}

h2 {
    font-weight: 500;

    &.title {
        font-size: 1.7rem;
        margin-top: 50px;
    }
}

h3 {
    display: none;
}

svg.iconify-inline.iconify.iconify--solar {
    scale: 1.2;
    margin: 0 5px;
}

main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    background: #1a1a1a;
    border-radius: 10px;
    border: 1px solid #f7f7f7;
    padding: 25px;
    margin: 10px;
    box-sizing: border-box;
    color: #f7f7f7;
}

header {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    background: #1a1a1a;
    border-radius: 10px;
    border: 1px solid #f7f7f7;
    padding: 15px 20px;
    margin: 10px;
    box-sizing: border-box;
    color: #f7f7f7;

    & nav {
        display: flex;
        align-items: center;

        & a {
            text-decoration: none;
            color: #f7f7f7;
        }
    }
}

.alert {
    padding: 15px;
    background-color: #dddb49;
    color: #212121;
    opacity: 1;
    transition: opacity 0.6s;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    border-radius: 5px;
    -webkit-animation: breathing 2s ease-out infinite normal;
    animation: breathing 2s ease-out infinite normal;

    &.hide {
        opacity: 0;
    }
}

input {
    background-color: white;
    box-sizing: border-box;
    color: black;
    border-radius: 5px;
    padding: 7px 12px;
    margin: 10px 0;
    border: 1px solid black;
}

.colorPickerContainer {
    margin-top: -20px;
}

.palletes {
    display: flex;

    & .light, & .dark {
        flex: 1;

        & .transparencyList {
            display: flex;
            flex-direction: column;
        
            & .base-color {
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: end;
                border-bottom: 0.5px solid var(--primary);
            
                & span {
                    padding: 7px 12px;
                    background: var(--primary-0t5);
                    height: min-content;
                    color: var(--secondary);
                    font-size: 80%;
                    width: 100%;
                }
            }
            
            & .variations-color {
                display: flex;
                width: 100%;
                height: 35px;
            
                & span {
                    padding: 0 10px;
                    width: 20px;
                    height: 100%;
                    color: #000;
                    font-size: 75%;
                    align-items: center;
                    display: flex;
                    background: var(--primary-0t5);
                }
            }
        }  
    }

    & .dark {
        & .variations-color {
            align-items: end;
            justify-content: end;
        }
    }

    & .light {
        & .variations-color {
            align-items: end;
        }

        & .transparencyList {
            border-right: solid 0.5px var(--primary-0t5);
        }
    }
}

#contrast-table {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;

    & .contrast-table-column {
        padding: 20px;
        background: var(--primary-0t1);
        border-radius: 10px;
        flex: 1;

        & table {
            border-collapse: collapse;
            color: var(--primary-0t8);
            background: var(--secondary-0t6);
            border-radius: 10px;
            overflow: hidden;
            border: none;
        
            /* Set the width and height of the table cells */
            & td, th {
                width: 50px; /* Adjust the width as needed */
                height: 50px; /* Adjust the height as needed */
                text-align: center;
                border: 1px solid var(--primary-0t1); /* Add borders for visual clarity */
            }

            & td:not(:first-child) {
                color: var(--secondary-0t6);
            }
            
            /* Set the width and height of the table headers */
            & th {
                width: 50px; /* Adjust the width as needed */
                height: 50px; /* Adjust the height as needed */
            }
            
            /* Set the width and height of the row names */
            & th:first-child, & td:first-child{
                width: 50px;
                height: 50px;
                text-align: left;
                padding: 0 12px;
            }
            
            /* Set the width and height of the column names */
            & thead th {
                width: 50px; /* Adjust the width as needed */
                height: 50px; /* Adjust the height as needed */
                text-align: center;
                padding: 0 12px;
            }
        }
    }
}

#colorScale {
    border-radius: 10px;
    overflow: hidden;
}

.color-box {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-0t8);
}

.colorColumnsContainer {
    display: flex;
    overflow-x: auto;
    flex-flow: row;
    max-width: 200vw;
}

.colorColumn {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 300px;
    padding-top: 10px;
    border: 1px solid var(--primary-0t5);
    margin: 10px;
    background-color: var(--primary-0t1);
    min-width: 300px;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    overflow: hidden;
}


.colorPicker {
    opacity: 0;
    transform: translate(-42px, 55px);
    margin: -20px;
}

::-webkit-scrollbar {
    padding: 10px;
    width: 5px;
    height: 5px;
    overflow: hidden;
    padding-right: 17px;
    margin: 10px;
}

::-webkit-scrollbar-track {
    background: var(--secondary);
    overflow: hidden;
    max-width: 50%;
    width: 50%;
    margin: 15px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #961cca;
    border-radius: 10px;
    padding: 10px;
    border: none;
    overflow: hidden;
    display: flex;
    padding-right: 17px;
    box-sizing: content-box;
}

::-webkit-scrollbar-corner {
    display: none;
}

textarea {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
}

/*____        _   _                  
 |  _ \      | | | |                 
 | |_) |_   _| |_| |_ ___  _ __  ___ 
 |  _ <| | | | __| __/ _ \| '_ \/ __|
 | |_) | |_| | |_| || (_) | | | \__ \
 |____/ \__,_|\__|\__\___/|_| |_|___/
                                     
Comment:
*/                                

[class*='btn'] {
    color: var(--primary-0t8);
    padding: 8px 17px; 
    border-radius: var(--border-radius-2);
    transition: 0.5s all;
    font-weight: 400;
    font-family: 'Lexend', sans-serif;
    width: max-content;

    &:hover {
        transition: 0.75s all;
    }

    & span {
        font-weight: 400;
    }
}

.btn-gray, a:visited.btn-gray {
    color: var(--secondary-0t9);
    border: 1px solid var(--secondary-0t9);
    background: var(--primary-0t5);
    text-shadow: 0 0 0.15px var(--primary-0t5);
}

.btn-gray:hover, a:hover.btn-gray {
    color: var(--primary);
    background: var(--secondary-0t9);
}

/*
⠀⣾⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⠿⣷⠀⠀⠀⠀⠀⠀⠀
⠀⡇                 ⡇
⠀⡇                 ⡇
⠀⡇      ¤ ¤ ¤      ⡇       _____           _             _ _                         _      
⠀⡇                 ⡇      |  __ \         | |           (_) |                       | |     
⠀⡇        ¤        ⡇      | |__) |__  _ __| |_ _ __ __ _ _| |_   _ __ ___   ___   __| | ___ 
⠀⡇   ¤         ¤   ⡇      |  ___/ _ \| '__| __| '__/ _` | | __| | '_ ` _ \ / _ \ / _` |/ _ \
⠀⡇                 ⡇      | |  | (_) | |  | |_| | | (_| | | |_  | | | | | | (_) | (_| |  __/
⠀⡇        ^        ⡇      |_|   \___/|_|   \__|_|  \__,_|_|\__| |_| |_| |_|\___/ \__,_|\___|
⠀⡇       ^ ^       ⡇
⠀⡇      ^ ^ ^      ⡇
⠀⡇                 ⡇
⠀⢿⣶⣶⣶⣶⣶⣶⣶⣶⣶⣶⣶⣶⡿

Comment: 📱Portrait mode                                       
*/

@media screen and (orientation: portrait) {
    .colorColumnsContainer {
        flex-wrap: wrap; /* Wrap columns on smaller screens */
        justify-content: flex-start; /* Align columns to start */
    }
    
    .colorColumn {
        width: calc(50% - 20px); /* Two columns per row on smaller screens */
        flex: 1;
    } 

    .tools-column {
        width: 100%;
    }
}


@-webkit-keyframes breathing {
    0% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
  
    25% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
  
    100% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
    }
  }
  
  @keyframes breathing {
    0% {
      -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
      transform: scale(0.95);
    }
  
    25% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
      transform: scale(0.95);
    }
  
    100% {
      -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
      transform: scale(0.95);
    }
  }