// _buttons.scss
// Button styles
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    background: var(--color-primary);
    color: white;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
        background: hsl(
            var(--color-primary-h),
            var(--color-primary-s),
            calc(var(--color-primary-l) - 10%)
        );
        border-color: hsl(
            var(--color-primary-h),
            var(--color-primary-s),
            calc(var(--color-primary-l) - 10%)
        );
    }
    
    &-outline {
        background: transparent;
        color: var(--color-primary);
        
        &:hover {
            background: var(--color-primary);
            color: white;
        }
    }
}


.close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: flex-end;     /* Centers vertically */
    //width: 50px;             /* Adjust to your desired background size */
    width: 26px;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.04); /* 8% black for a faint dark badge */
    border-radius:50%; /* 50% for circles, use a value like 8px for rounded boxes */
    border: none;
    color: #555; /* Symbol color */
    font-size: 26px;
    cursor: pointer;
    z-index: 10;
    &:hover {
        background-color: rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.1);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        color: #333;
    }
}


/*
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.08); // 8% black for a faint dark badge 
  border-radius: 50%; // 50% for circles, use a value like 8px for rounded boxes 
  color: #333; // Symbol color 
}
*/