@import url('../style.css');

body{
    display: flex; 
    align-items: center;
    justify-content: center;
}
.split-btn{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
button{
    border: none;
    border-radius: 11px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    cursor: pointer;
    padding: 10px;
}
.list{
    position: absolute;
    left: 100%;
    top: -100px;
    scale: 1;
    transition: all .5s ease-in-out;
    display: none;
}
.list > ul {
     width: 200px;
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 10px;
     background-color: var(--background-color);
     color: var(--secondary-color);
     border-radius: 12px;
     list-style: none;
}
.list.active{
    display: block;
}
.fa-arrow-down{
     transform: rotate(0deg);
     transition: all .2s ease-in-out;
}
.fa-arrow-down.active {
      transform: rotate(-180deg);
}