$tabs-height: 40px; :host { line-height: $tabs-height - 2px; cursor: pointer; flex: 1000 1 200px; width: 200px; display: flex; flex-direction: row; min-width: 0; overflow: hidden; transition: 0.25s ease-out all; border-top: 1px solid transparent; .index { flex: none; font-weight: bold; margin-left: 10px; width: 20px; border-radius: 10px; line-height: 38px; text-align: center; transition: 0.25s all; } .name { flex: auto; margin: 0 1px 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } button { display: block; flex: none; background: transparent; opacity: 0; $button-size: $tabs-height * 0.6; width: $button-size; height: $button-size; border-radius: $button-size / 2; line-height: $button-size * 0.8; margin-top: ($tabs-height - $button-size) * 0.4; margin-right: 10px; text-align: center; font-size: 20px; } &:hover button { transition: 0.25s opacity; display: block; opacity: 1; } }