@import './ca-input.colors.scss';

.input-pen-container {
    position: absolute;
    right: 50px;
    top: 46%;
    transform: translateY(-50%);
    display: none;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    .input-pen {
        svg {
            width: 18px !important;
            height: 18px !important;
            overflow: visible;
            path {
                fill: $valid-pen-path;
            }
            rect {
                transition: transform 0.3s;
                transform: scale(1);
                transform-origin: center;
                fill: $valid-pen-rect;
            }
        }

        &:hover {
            svg {
                overflow: visible;

                rect {
                    transform: scale(1.2);
                    transform-origin: center;
                    transition: transform 0.3s;
                    fill: $valid-on-pen-rect-hover;
                }
            }
        }
    }
}